# Ajax zooming pictures

**URL:** <https://www.ruby-forum.com/t/ajax-zooming-pictures/64290>\
**Category:** Rails\
**Created:** [June 23, 2006, 9:41pm UTC](https://www.ruby-forum.com/t/ajax-zooming-pictures/64290 "2006-06-23T21:41:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidstokar](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/4da419/32.png) [@davidstokar](https://www.ruby-forum.com/u/davidstokar)\
**Post date:** [June 23, 2006, 9:41pm UTC](https://www.ruby-forum.com/t/ajax-zooming-pictures/64290/1 "2006-06-23T21:41:27Z")

</div>

Hi,

I was wondering if anyone has an idea of the code that I can write to  
achieve the follow effect.

> **[Nature And Landscapes Stock Photos, Images & Pictures - iStock](https://www.istockphoto.com/search/2/image?recency=last30days&phrase=)**
>
> Search iStock's vast picture library to find the perfect nature and landscapes images for your project. Cool stock photos you won't find anywhere else. Search now.

When you move your mouse over an image, it shows a bigger picture.

Thanks

---

<div class="post-metadata">

**Author:** ![davidstokar](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/4da419/32.png) [@davidstokar](https://www.ruby-forum.com/u/davidstokar)\
**Post date:** [June 23, 2006, 10:06pm UTC](https://www.ruby-forum.com/t/ajax-zooming-pictures/64290/2 "2006-06-23T22:06:35Z")

</div>

They may be storing two sizes of the images, or just one file and  
displaying it at different resolutions. The second idea seems ideal,  
as the client already has the file, and it just being redisplayed at a  
larger res.

- Nic.

---

<div class="post-metadata">

**Author:** ![davidstokar](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/4da419/32.png) [@davidstokar](https://www.ruby-forum.com/u/davidstokar)\
**Post date:** [June 23, 2006, 10:21pm UTC](https://www.ruby-forum.com/t/ajax-zooming-pictures/64290/3 "2006-06-23T22:21:55Z")

</div>

I understand that. I just don’t know how to write the AJAX in ROR to do  
the onmouseover event and then show the bigger picture and I thought  
that someone might have an idea on how to do it, with some sample code

---

<div class="post-metadata">

**Author:** ![davidstokar](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/4da419/32.png) [@davidstokar](https://www.ruby-forum.com/u/davidstokar)\
**Post date:** [June 23, 2006, 10:21pm UTC](https://www.ruby-forum.com/t/ajax-zooming-pictures/64290/4 "2006-06-23T22:21:44Z")

</div>

David S. wrote:

> Hi,
> 
> I was wondering if anyone has an idea of the code that I can write to  
> achieve the follow effect.
> 
> [Stock Photos, Pictures & Royalty-Free Images - iStock](http://www.istockphoto.com/file_search.php?action=file&userID=938503)
> 
> When you move your mouse over an image, it shows a bigger picture.
> 
> Thanks

Judging from a peek at the source, they are probably using a variation  
of Lightbox: [http://www.huddletogether.com/projects/lightbox/](http://www.huddletogether.com/projects/lightbox/)

---

<div class="post-metadata">

**Author:** ![davidstokar](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/4da419/32.png) [@davidstokar](https://www.ruby-forum.com/u/davidstokar)\
**Post date:** [June 25, 2006, 1:53am UTC](https://www.ruby-forum.com/t/ajax-zooming-pictures/64290/5 "2006-06-25T01:53:28Z")

</div>

One thing that instantly comes to mind is something that can be added  
to your Wikipedia account which brings up an image popup. It’s far  
better implemented than the example you gave, although it’s onclick  
rather than onmouseover. I expect that would be easy to change though.

You can find the source here:

> **[User:Zocky/PicturePopups.js](https://en.wikipedia.org/wiki/User:Zocky/PicturePopups.js)**

and add it to your Wikipedia account by copying it to \<\>/monobook.js.

Hope this will help you work it out.

-Nathan

---

<div class="post-metadata">

**Author:** ![davidstokar](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/4da419/32.png) [@davidstokar](https://www.ruby-forum.com/u/davidstokar)\
**Post date:** [June 23, 2006, 10:35pm UTC](https://www.ruby-forum.com/t/ajax-zooming-pictures/64290/6 "2006-06-23T22:35:22Z")

</div>

Am 23.06.2006 um 22:21 schrieb David S.:

> I understand that. I just don’t know how to write the AJAX in ROR  
> to do  
> the onmouseover event and then show the bigger picture and I thought  
> that someone might have an idea on how to do it, with some sample code

I guess that they simply load a bigger picture from the server and  
display it in a “tool tip” style window (I know Overlib that does  
this - it originated in the time when DHTML was pimp: http://  
[www.bosrup.com/web/overlib/](http://www.bosrup.com/web/overlib/))

HTH

Manuel

–  
I have found an elegant and short solution for Fermat’s Theorem  
but sadly there is not enough space for it in this signature.