Search code examples
jquerysimplemodal

Dynamically resize Simple Modal Depending on what is clicked

I am fairly new to jQuery/JavaScript so I am having a few problems, hopefully you can point me on the right track.

On my project I have a row of images, showing previews of images. Kind of a image gallery.

I want to be able to click onto the smaller images and then get simple Modal to display the full size image, dynamically resizing and animating.

Can I do this with Ajax, to refresh simple modal? I am still learning how to use Ajax with jQuery and there seems many ways to do it.

Here is what I have:

jQuery:

$('.col1').find('img.overlay').click(function() {

                $('#imgpreview').modal({overlayClose:true});

                var img = $(this).parent().find('img.shared').attr('src');
                var imgW = $(this).parent().find('img.shared').attr('width');
                var imgH = $(this).parent().find('img.shared').attr('height');

                $('#imgpreview').css('width', imgW);
                $('#imgpreview').css('height', imgH);                   
                $('#imgpreview').find('img').attr('src', img);

            });

    });

HTML: 

            <div id="imgpreview"><img src=""></div>
                        <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img1.jpg"></div>
                        <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img2.jpg"></div>
                        <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img3.jpg"></div>
                        <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img4.png"></div>
                        <div class="col1 bg"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" height="104" src="img/uploaded/img5.jpg"></div>
                        <div class="col1 bg nmr"><img class="overlay" src="img/overlay.gif" width="104" height="104"><img class="shared" width="104" src="img/uploaded/img6.jpg"></div>

I can display the image inside the simple modal but the image does not sit inside the dimensions of the image so I can give it a border and styling, also means it does not sit in the middle.

Another option is to create a simple modal dialogue box for each image and echo out the jQuery with PHP since the images will be in the database. But would there be a better way?

Solution

  • I don't have a clue about that modal plugin. It's been my experience that jQuery plugins are hardly worth the trouble of figuring out. That being said, you could try this....

    <head>
    $(document).ready( function() {
        $('.overlay).click( function() {
            $('#bigPic).append('<img id="myPic" src="my dynamic source.gif"/>');
        });//end click
    });//end ready
</head>

<body>
    <div id="previews">

        //Your posted html here
    </div>
    <div id="bigPic">

    </div>
</body>

    Then the CSS would have something like : img #myPic{ height: 100%; width: 100%; }

    It looks like you are a little confused by what this is in your question. In your case it is $("img.overlay") You can avoid all that nonsense by just adjusting the 

    <div id="bigPic">

    to suit your needs.