Question

I am using PrettyPhoto Jquery plugin as a Lightbox for displaying images on my site, when the user clicked the thumbnail, the image appear in an overlay DIV.

By default, PrettyPhoto works with anchor links (<a>) that surrounds the image. The anchor has the links to the original size / larger version of the image. I don’t want to use <a> tag because I prefer that those images won’t be indexed and don’t wont to use nofollow. Is there an option to replace the <a> with for example and achieve the same results?

I tried it myself but it didn’t trigger the overlay div with the original image as intended. Maybe there is something that I can do in the code to make it work.

Again, Don’t want:

 <a href="original-image.jpg"><img src="thumb,jpg /></a>

Do want:

 <span data-source="original-image.jpg"><img src="thumb.jpg /></span>

The original file non-compressed Jquery plugin can be downloaded via this link

Another alternative that might be good is to keep the anchoe but use href="#" and put the original image URL in another attribute, like ‘data-source’ and read it from there. This is even a better option.

Thanks

Answer 1

Try to change this line in the plug-in

pp_images = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return $(n).attr('href'); }) : $.makeArray($(this).attr('href'));

to

pp_images = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr(settings.hook).indexOf(theRel) != -1) return $(n).attr('data-source'); }) : $.makeArray($(this).attr('data-source'));

EDIT: and

set_position = jQuery.inArray($(this).attr('href'), pp_images); // Define where in the array the clicked item is positionned

to

set_position = jQuery.inArray($(this).attr('data-source'), pp_images); // Define where in the array the clicked item is positionned