Home/ Questions/Q 8329581
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T01:50:23+00:00

I am fairly new to jQuery/JavaScript so I am having a few problems, hopefully

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0