Question

I’m using this cool image slider http://www.jscraft.net/demo/plugins/filters/, but as you can see, using this slider for large images might be a problem…What I basically want to do is add an anchor tag around each smaller image (as seen in the slider) and when you click on the image, it will pop out (or any type of smooth display without navigating away from the page) the larger size of that image…Any ideas on how to do that? Perhaps with jquery or javascript? Note that I don’t want to use another slider for that as well, don’t like mixing up scripts…

Thank you!

Answer 1

ok ok I got this..here is your code..

Tha javascript :

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
    $('img.zoomable').css({ cursor: 'pointer' }).live('click', function () {
        var img = $('img.bigImg');
        var bigImg = $('<img />').css({
            'max-width': '100%',
            'max-height': '100%',
            'display': 'inline'
            //'margin': '-25% 0 0 -25%'
        });
        bigImg.attr({
            src: img.attr('src'),
            alt: img.attr('alt'),
            title: img.attr('title')
        });
        var over = $('<div />').text(' ').css({
            'height': '100%',
            'width': '100%',
            'background': 'rgba(0,0,0,.82)',
            'position': 'fixed',
            'top': 0,
            'left': 0,
            'opacity': 0.0,
            'cursor': 'pointer',
            'z-index': 9999,
            'text-align': 'center'
        }).append(bigImg).bind('click', function () {
            $(this).fadeOut(300, function () {
                $(this).remove();
            });
        }).insertAfter(this).animate({
            'opacity': 1
        }, 300);
    });


</script>

And the HTML :

<img class="zoomable" src="smallImage.jpg" height="100" width="100"/>
<img class="bigImg" style="visibility:hidden" src="bigImage.jpg"/>

you have to add two links for every image.