Gallery - Link from large image

Question

Having started with the spry image gallery, I am having
trouble adding a link using the large image. Anyone know how to
extract the image ID and make it a link for the large image to go
to a detail page.

Answer 1

Hi Henry,
Here's a way how to do that:
1. Add a js function that sets a new url for the image
onclick everytime the source of the image changes. Add it in the
head of the page (right after the XMLDataSets declarations):
// this function is called every time the source for the main
image is changed
function SetMainImageLink(curRow) {
var img = document.getElementById("mainImage");
if (!img)
return;
var path = 'product_detail.cfm?ID=' + curRow["@path"];
img.onclick = function() {
window.location.href=path;
2. open gallery.js file and locate this function: "function
ShowCurrentImage()"
3. call SetMainImageLink from within ShowCurrentImage. Here's
the full source for the modified function ShowCurrentImage()):
function ShowCurrentImage()
var curRow = dsPhotos.getCurrentRow();
SetMainImageLink(curRow);
SetMainImage("galleries/" +
dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
4. (optional) you can edit the img tag and add a style on it,
so it display a hand cursor when you mouse over it.
<img id="mainImage" alt="main image"
style="cursor: hand; cursor: pointer;"/>
Hope this helps you,
best regards,
Dragos