Hey Mike, You could achieve something like this with CSS and no JavaScript:
http://gist.github.com/534548 I'm not sure how this will behave in some browsers. IE6 for one won't like div:hover. <http://gist.github.com/534548>You can go and enhance it with CSS3 box shadows and even transitions for the zoom effect. Dylan On 18 August 2010 22:34, Mike Bailey <[email protected]> wrote: > Thanks Mikel, that looks like what I need! :-) > > - Mike > > On Wed, Aug 18, 2010 at 10:33 PM, Mikel Lindsaar <[email protected]>wrote: > >> I'm no jQuery king, but this should get you started on popping the images >> up... you will need to fix the positioning of the image as well by adding >> the appropriate style. >> >> jQuery(function($) { >> $('img').live('hover', function(){ >> $(this).animate({ height: $(this).attr('data-height'), >> width: $(this).attr('data-width') }, >> 2, 'swing'); >> }); >> >> >> Mikel >> >> >> >> On 18/08/2010, at 10:16 PM, Mike Bailey wrote: >> >> That looks pretty cool Julio! >> >> Right now I'm wondering how to make a div popup when users hover over the >> image. >> It needs to grab some values from the image element like google does: >> >> <img class="rg_hi" id="rg_hi" src="blah" width="272" height="185" >> data-width="272" data-height="185" <----- Use these to calculate size of >> onhover popup >> style="width:272px;height:185px"> >> >> I'm sure it's a simple one. :-) >> >> - Mike >> >> On Wed, Aug 18, 2010 at 9:59 PM, Julio Cesar Ody <[email protected]>wrote: >> >>> Yeah, >>> >>> http://desandro.com/resources/jquery-masonry/ >>> >>> I'm building an iPhone/iPad web app that uses it for image search >>> >>> http://github.com/juliocesar/domino >>> >>> Counts as a "ghost of done" now that I said so on the Internet before >>> it's done :) >>> >>> >>> >>> On Wed, Aug 18, 2010 at 9:50 PM, Mike Bailey <[email protected]> wrote: >>> > http://www.google.com.au/images?q=dogs&biw=1246&bih=985 >>> > Have you seen Google's new look image search? Besides being super fast, >>> it's >>> > got a nice way of showing an image's details on hover. >>> > I'd like to implement a similar hover display on Goodfordogs.org. Can >>> anyone >>> > point me to a simple example? >>> > thanks, >>> > Mike >>> > >>> > -- >>> > >>> > http://Goodfordogs.org - Adopt a dog or cat >>> > >>> > -- >>> > You received this message because you are subscribed to the Google >>> Groups >>> > "Ruby or Rails Oceania" group. >>> > To post to this group, send email to [email protected]. >>> > To unsubscribe from this group, send email to >>> > [email protected]<rails-oceania%[email protected]> >>> . >>> > For more options, visit this group at >>> > http://groups.google.com/group/rails-oceania?hl=en. >>> > >>> >>> >>> >>> -- >>> http://crazyhollywood.org >>> >>> -- >>> You received this message because you are subscribed to the Google Groups >>> "Ruby or Rails Oceania" group. >>> To post to this group, send email to [email protected]. >>> To unsubscribe from this group, send email to >>> [email protected]<rails-oceania%[email protected]> >>> . >>> For more options, visit this group at >>> http://groups.google.com/group/rails-oceania?hl=en. >>> >>> >> >> >> -- >> >> http://Goodfordogs.org - Adopt a dog or cat >> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Ruby or Rails Oceania" group. >> To post to this group, send email to [email protected]. >> To unsubscribe from this group, send email to >> [email protected]. >> For more options, visit this group at >> http://groups.google.com/group/rails-oceania?hl=en. >> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Ruby or Rails Oceania" group. >> To post to this group, send email to [email protected]. >> To unsubscribe from this group, send email to >> [email protected]<rails-oceania%[email protected]> >> . >> For more options, visit this group at >> http://groups.google.com/group/rails-oceania?hl=en. >> > > > > -- > > http://Goodfordogs.org - Adopt a dog or cat > > -- > You received this message because you are subscribed to the Google Groups > "Ruby or Rails Oceania" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]<rails-oceania%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/rails-oceania?hl=en. > -- You received this message because you are subscribed to the Google Groups "Ruby or Rails Oceania" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/rails-oceania?hl=en.
