show images and click to enlarge

[thadeez]

Hi guys, after looking for the right place to submit my request i ended up here. Hopefully you will help me to solve this easily.

 

On our website (Joomla based) we list our products, each with its own product page. Each product is entered in the admin using a couple of fields, that are displayed when you go to the frontend of the site.

 

Now, in the admin when entering a product item, we also enter a relative path to the images that correspond to this product. This path is then used in the php code of the page. The page will display the main image at full size, and the remaining images as thumbnails. When clicking on a tumbnail that image moves to the main spot.

 

What we'd like to see, is the option to click on the main image and enlarge it to fullsize, if possible using some sort of lightbox effect. Any help will be greatly appreciated!

 

Here is the shred of code that displays the main image and thumbs of the other images:

 

<table width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td rowspan="2"><img src="<?php echo (sizeof($images) > 0 ? $path.$images[0] : '/images/stories/notavailable.jpg'); ?>" id="mainpicture" /></td>
                <td><?php echo $product->header; ?></td>
            </tr>
            <tr>
                <td><?php 
                    $i = 1; $divi = 1;
                    foreach($images as $img){
                        if($i%4==1){
                            if($i==1){
                                echo '<div id="div'.$divi.'" style="display: inline">';
                                $divi++;
                            }else{
                                echo '<img src="/images/stories/re-right.gif" align="top" class="nav-scroll" onclick="navNext(\'div'.($divi-1).'\',\'div'.$divi.'\');return false" /></div><div id="div'.$divi.'" style="display: none"><img src="/images/stories/re-left.gif" align="top" class="nav-scroll" onclick="navNext(\'div'.$divi.'\',\'div'.($divi-1).'\');return false" />';
                                $divi++;
                            }
                        }
                        echo '<img src="'.$path.$img.'" alt="image" width="100" onclick="displaymainpictures(this)" />';
                        $i++;
                    }
                    echo '</div>';
                ?></td>
            </tr>
            <tr>
                <td colspan="2"><?php echo parseThruBots($product->desc); ?></td>
            </tr>
        </table>

[thadeez]

oh here's a direct link to a page:

http://www.acryan.com/index.php?option=com_acryan_product&product_item=207&parent_id=42&Itemid=98

[ShimmyShine]

You want one like his?  Or like : http://www.tagmypic.net

 

If you want one like the link I have provided I will post the code (Note it is not mine) else wise you'll have to get his on your own

 

ShimmyShine

[thadeez]

The way it is on tagmypic.net is perfect!

[thadeez]

ShimmyShine, can you still post the code ? Otherwise does anyone else have a piece of code i can use ?