Search code examples
jquerylightboxprettyphoto

PrettyPhoto Jquery Plugin, use span instead of anchor and achieve same results

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

Solution

  • 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