How to Display bigger image on mouse hover or click?

Yii 1.1 General Discussion
1

I have got basic understanding of the wonderful Yii framework and started creating a site to get better feel of it. On one of my page, I display list of products retrieved from a data model using zii.widgets.CListView. The displayed information includes text data as well as image (whose file name is stored in the data model.) On the page, I an displaying smaller images (thumbnails) from image_icons folder. My code is something like this.


echo CHtml::image( Yii::app()->request->baseUrl . '\\image_icons\\'. $data->imagefilename,

                  $data->imagefilename,  array('width'=>100,"title"=>"Clcik to enlarge")

                  );

So far so good. I keep the bigger picture of the same file in another folder (images). What I want to do is to display a bigger image in a separate window when the mouse hovers on the thumbnail. If that is too complicated, it is okay if the bigger image is displayed when the mouse is clicked on the thumbnail.

I shall appreciate if I can have some suggestions/tips from experts.

Thanks in advance.

2

i’ve done something like this in OSCommerce, and probably it’ll work just as the same.

first, put a class on the image. you can do it in any way you want. just be sure that it is included in the array so that every image has the class.

oh before we go on, use big images for your thumbnails… i’ll explain why later.

then use JQuery, if u dunno how to use this, go to jquery.com or something and read stuff.

just a quick tip you can set the image to resize to a smaller size via the class assigned by default. and when OnClick or OnMouseHover animate it to enlarge. :)

3

Thanks Karl.

I will give JQuery a try.