CODEWITHSUNDEEP
jquery
Ramesh
Ramesh

Reputation: 2337

jquery image zoom like google image search

I need to do the same thing from this post Pop Images like Google Images But i need to add as same as google image search ie the on hover the image title need to be displayed . I am from java and new to jquery so please help me http://jsfiddle.net/roXon/HmTrw/

Upvotes: 0

Views: 955

Answers (2)

Qussay Najjar
Qussay Najjar

Reputation: 591

In my case I needed more than attribute title, my images structure is as next:

<ul class="thumbnails">
    <li>
        <div class="thumbnail">
             <img src="/images/200X150.gif" alt="200X150" />
             <div class="caption" style="display:none">
                  HTML Goes here
             </div>
        </div>
    </li>
    ....
</ul>

you'll need to update plugin ibox after:

el.mouseenter(function() {
    ibox.html('');

add this:

$('#ibox').append('<div class="ibox-caption">'+$(this).siblings('.caption').html()+'</div>');

and the css for .ibox-caption should have the same image width:

.ibox-caption {
    width: 200px;
}

Upvotes: 1

Mark Eirich
Mark Eirich

Reputation: 10114

Just after the line ibox.html(''); (around line 20 in the JS) add this line:

jQuery('<div />').text(this.title).appendTo(ibox);

You will also want to add some CSS.

Upvotes: 0

Related Questions