locked
Click on an image, to make div/modal show and hide (Javascript, REST, SharePoint) RRS feed

  • Question

  • i am trying to create a simple program that when a users click on the image of a person it shows a modal with the details of the user who his image was clicked. At the moment what my program does is to get the details(Name, image url, title and id) of a user from a SharePoint list, The position function takes care of the positioning of the images on the page and tries to make sure that the images do not overlap. i was working through it bit by bit. But i hit a snag, i'm not sure how to in-corporate a click event on the images to my program. Any ideas would be grand

     
    function PersonConstructor(username,Title,Phone,Email,Id){
    
        return {
            name: username,
            Title: Title,
            phoneNumber: Phone,
            Email: Email,
            UserId: Id,
            PictureUrl: picUrl
        }
    
    }
    
    var ListData = function (){
         var mydeferred = $.Deferred();
         var WebURL = _spPageContextInfo.webAbsoluteUrl;  
        listName = 'TeamInfo';
           $.ajax({
                 url: WebURL+ "/_api/web/lists/getbytitle('"+listName+"')/items?$select=Name/Title,Name/Name,Name/Id,Name/EMail,Name/WorkPhone&$expand=Name/Id",
                type: "GET",
                headers: { "ACCEPT": "application/json;odata=verbose" },
                success: function(data){
                    var PeopleCompleteList = [];
                    for (i=0; i< data.d.results.length; i++) {
                        //check if the user exists if he does store the following properties name,title,workphone,email
                        if(data.d.results[i]['Name'] != null){
                            personName = data.d.results[i]['Name'].Name.split('|')[2];
                            userName = data.d.results[i]['Name']['Name'];
                            UserTitle = data.d.results[i]['Name']['Title'];
                            UserphoneNumber = data.d.results[i]['Name']['WorkPhone'];
                            UserEmail = data.d.results[i]['Name']['EMail'];
                            Id = data.d.results[i]['Name']['Id'];
                            picUrl= WebURL + '/_layouts/15/userphoto.aspx?size=L&accountname='+UserEmail
                            PeopleCompleteList.push(PersonConstructor(personName, UserTitle, UserphoneNumber,UserEmail,Id, picUrl));
                        } 
                    }
                   mydeferred.resolve(PeopleCompleteList) 
                },
                error: onQueryFailed
            });
            return mydeferred.promise();
        }
    
    
    function onQueryFailed (err){
        mydeferred.reject(err);
    }
    
    var positioningFunction= function (){
        var containerW = 700;
        var containerH = 600;
        var  positions = [];
        $(".img-circle").each(function(){
            var ctx = $(this);
            var coords = {
                 w: $(this).outerWidth(true),
                 h: $(this).outerHeight(true)
            };
            var success = false;
            while (!success){
                coords.x = parseInt(Math.random() * (containerW-coords.w));
                coords.y = parseInt(Math.random() * (containerH-coords.h));
                var success = true;
    
                $.each(positions, function(){
                    if (
                        coords.x <= (this.x + this.w) &&
                        (coords.x + coords.w) >= this.x &&
                        coords.y <= (this.y + this.h) &&
                        (coords.y + coords.h) >= this.y
                        )
                        {
                            success = false;
                        }
                 });
    
            }
            positions.push(coords);
            $(this).css({
                top: coords.y + 'px',
                left: coords.x + 'px'
            });
            
    }    
    
    $(function () {
            ListData()
            .then(function(data){
                var imageHtml = [];            
                data.map(function(items, index){
                    imageHtml.push('<img class="img-circle" src="'+items['PictureUrl']+ '"/>');
                    console.log(items);
                });
    
               var imagesString = imageHtml.join().replace(/,/g,"");           
               $('#gallery').append(imagesString); 
               console.log(imagesString);
               positioningFunction();           
               
            })
                  
        });

    Friday, November 17, 2017 10:31 AM

Answers

  • Hi,

    Here is a demo about show a div when clicking the image with Jquery for your reference:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(function() {
             $(".slidingDiv").hide();
             $("img[title='test']").click(function() {
             $(this).parent().find(".slidingDiv").slideToggle();
            });
       });
    
    </script>
    <img src="http://sp/PublishingImages/download.jpg" alt="test" title="test"></img>
    <div class="slidingDiv">
        <h2>Title</h2>
        <p>text</p>
    </div>
    

    When page load, it won't show slidingDiv class:

    After clicking the image, it will show the div:

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, November 22, 2017 7:13 AM