CODEWITHSUNDEEP
jqueryimagezooming
Pascal Liu
Pascal Liu

Reputation: 3

Image zoom with jQuery

I've been searching for what plug in is used in these 2 sites for the full screen image viewing:

I'm searching for a jQuery module (or tutorial) that would do something similar. Note that I'm talking about the FULL SCREEN PICTURE when you CLICK on the product image, not the "CloudZoom" feature when your mouse is over the image. I'm currently using the widely used Lightbox module with CloudZoom, but the image loaded by Lightbox is way to big (because the href points to a BIG image, for the CloudZoom zoom).

What I need here is to have an image that uses the full browser size (not bigger than the current browser, as the lightbox creates an opaque dark background that only takes the browser's height. If my image is bigger, the user can scroll down but the lightbox dark background doesn't fill up the page).

Many thanks for your help

Upvotes: 0

Views: 12654

Answers (5)

Jaydeep Gondaliya
Jaydeep Gondaliya

Reputation: 321

html

<div id="Gpic1"><img id='table' src='http://i.imgur.com/7ESpNI8.jpg'></div>

Jquery

$('#Gpic1').hover(function(){
        $(this).find('img').fadeTo(500, 0.5);
    }, function(){
        $(this).find('img').fadeTo(500, 1);
    });

$('#table').click(function() {
        $('#Gpic1').find('img').fadeTo(0, 1);
        if($('#table').hasClass('enlarged')){
            $('#table').removeClass('enlarged');
            $("#table").stop().animate({width: 280, height: 187}, 200 );
        }else{
            $('#table').addClass('enlarged')
            $("#table").stop().animate({width: 800, height: 533}, 200 );
        }

    });

css

#Gpic1{
    width: 280px;
    height: 187px;
    display: block;
    background: black;
}

#table{
    width: 280px;
    height: 187px;
}

Jsfiddl demo

Upvotes: 0

Thorgeir
Thorgeir

Reputation: 4443

Have you tried: Touch Gallery?

Upvotes: -1

budoudoh
budoudoh

Reputation: 301

You should also give Supersized a look. I've used it for a couple of projects and have never had an issue with it. It's very customizable.

Upvotes: 3

Sven
Sven

Reputation: 11

You might want to check out "CloudZoom" which usess image tiles. This way your original image can be as large as you want - 10mp, 20mp or even 100mp if you like: http://www.ajax-zoom.com/examples/example20.php Fullscreen is also supported if you click on that image.

Upvotes: 1

w3uiguru
w3uiguru

Reputation: 5895

Here is the link on which you can get the image zoom plugin which might help you.

Zoom Effect plugin as per your example 2

UPDATE:

Here is the jQuery fullscreen image gallery

Upvotes: 3

Related Questions