Howto open large product picture with a darkened background (LightBox)

Hi,can You give us the URL of your shop? It's quite imposible to answer without seeing the actual webshop. -taivo

Nobody responded, but I thought that I'd create it anyway...please respond if you find this useful...

-----------------------------------
Download LightBox v2
http://www.huddletogether.com/projects/lightbox2/

Editing the files to suit your requirements;

Extract the files and edit the following;

css\lightbox.css

Locate the lines (44 to 53)...

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

Change the URLs to match your image locations...eg

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(/files/YOURSHOPNAME/html/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/files/YOURSHOPNAME/html/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/files/YOURSHOPNAME/html/nextlabel.gif) right 15% no-repeat; }

js\lightbox.js

Line 65 & 66

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

To;

var fileLoadingImage = "/files/YOURSHOPNAME/html/loading.gif";
var fileBottomNavCloseImage = "/files/YOURSHOPNAME/html/closelabel.gif";

Uploading the files;
Upload all the files (css, JPGs and .js not the html file) to your shop via the filemanager.

Link the images to the product.

You need to locate the unique number of each product, do this by clicking on the "Pictures and files" tab and hover your mouse over the "preview" link for the main picture that will be used in the "Product Card".

This should give NUMBERpictureNUMBER.jpg e.g. 111picture1.jpg

The first number (i.e. 111) is the unique product number; the second number is the picture number of the product...remember these numbers.

Click on the "Open Fields" and enter the unique product number in "Openfield 5" (use another open field number if that is used).

If you are using two main images image for the product, enter a letter y to Openfield 6, if 3 enter a letter y to Openfield 7 as well as 6.

Repeat this process for all your products.

My pictures for the products are sorted as follows;
Picture 1 = very small image used for Product Spot element
Picture 2 = medium image used for Product Card element
Picture 3 = Large image to be used with LightBox v2
Picture 4 = other images of the product
Picture 5 = other images of the product

Edit the "Product Page" (Visual --> Themes --> Page Construction --> Product Page) and click on the Product Card element.

Where you have the $picture#$ in the coding (# = main picture number), change this to...

<a href="/filemanager/productpics/$product_open_field5$picture3Upload.jpg" rel="lightbox[link]" title="$product_name$">$product_picture2$<br>
<i><center>Click to enlarge image</center></i></a>

The above line should be edited to suit your images, i.e.

$product_open_field5$ = The Open Field you used previously to enter the unique number

picture3Upload.jpg = This is the large picture you have uploaded to the product (remember the number 3 is for picture 3 for the product as per my details above so change as required)

$product_picture2$ = This is a main image used in the Product Card element.

If you have more than one main image in the Product Card element use the following code;

<script type="text/javascript">
var pic = "$product_open_field6$";
if (pic=="y"){
document.write ("<a href='/filemanager/productpics/$product_open_field5$picture4Upload.jpg' rel='lightbox[link]'><img src='/filemanager/productpics/$product_open_field5$picture4Upload.jpg'></a>")
}
</script>

Again, edit the above line to match the Openfield you used to enter the letter y and which picture number you have used for your additional main images...this code can be repeated for all other main images, e.g.

<script type="text/javascript">
var pic = "$product_open_field7$";
if (pic=="y"){
document.write ("<a href='/filemanager/productpics/$product_open_field5$picture5Upload.jpg' rel='lightbox[link]'><img src='/filemanager/productpics/$product_open_field5$picture5Upload.jpg'></a>")
}
</script>

Lastly, click on Visual --> Themes --> Strcture --> FrameFree and add the following lines just after the <head> tag in the code;

<script language="javascript" src="/files/YOURSHOPNAME/html/prototype.js"></script>
<script language="javascript" src="/files/YOURSHOPNAME/html/scriptaculous.js?load=effects"></script>
<script language="javascript" src="/files/YOURSHOPNAME/html/lightbox.js"></script>

They *MUST* be entered in that order and the very next line after the <head> (not after the </head>)

If all has gone well, you will have a good image viewer that looks professional.

A working version can be viewed by clicking on the following link.
http://www.modmyconsole.co.uk/

Direct to a product with multiple images.
http://www.modmyconsole.co.uk/PublishedService?file=page&pageID=9&itemcode=0043