Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3048
  • Last Modified:

Prevent PrettyPhoto JQuery From Duplicating First Image

I am trying to implement a gallery function on my ecommerce site using the JQuery prettyphoto script.  I've got it working, however, there is one little annoying behavior that I would love to solve.  Clicking the main image triggers the gallery, and clicking any thumbnail triggers the gallery.  Because the main image's path gets written twice to the code, once for itself and then again when all the images for that product are written for the thumbnails, it appears twice in the gallery as the first two pictures.  Our old light box script would duplicate the lead image also but would stick the duplicate on the end, which was dumb but less obvious.  The ecom software is called PDG.

How can I prevent the gallery from having the first image duplicated?

Here's the code I am using:

 
<a href="!---IMAGE---" rel="prettyPhoto[pp_gal]" title="!---ALT_TEXT---"><img src="!---IMAGE---" alt="!---DESC---" title="!---DESC---"/></a>
        
<!---BEGIN_IMAGES_ROW--->
	<!---NUM_IMAGES_PER_ROW 1--->
        <!---BEGIN_IMAGES--->
<a href="!---IMAGE_URL---" rel="prettyPhoto[pp_gal]" title="!---ALT_TEXT---"><img src="/thumbs!---IMAGE_URL---" alt="!---DESC---" title="!---DESC---" /></a>
   	<!---END_IMAGES--->
    <!---END_IMAGES_ROW--->

Open in new window


And here is a link to see the current behavior:

http://www.themusiczoo.com/product/8505/Pic-Test/
0
puppyknuckles
Asked:
puppyknuckles
  • 4
  • 3
1 Solution
 
SRigneyCommented:
when I view the source I see the attached html.  

The first 2 items are the same image 1 with a title and 1 without.  

The problem is not the jQuery that is generating the PrettyPhoto, it's only building with what it is given to work with.

I'm not sure what language the code you attached in the question is, but it's possible that the loop is starting at the same place as the one that you have hard coded outside the loop.  That would duplicate the first item.
<div id="ProdPicture" >   
    
    
 		<a href="/images/2-23-11/Gibson_Custom_Shop_Jimmy_Page_Number_2_Page_2_013_1.jpg" rel="prettyPhoto[pp_gal]" title=""><img src="/images/2-23-11/Gibson_Custom_Shop_Jimmy_Page_Number_2_Page_2_013_1.jpg" alt="2010 Gibson Custom Shop Jimmy Page &quot;Number Two&quot; Les Paul - Used" title="2010 Gibson Custom Shop Jimmy Page &quot;Number Two&quot; Les Paul - Used"/></a>
        

	
        
<a href="/images/2-23-11/Gibson_Custom_Shop_Jimmy_Page_Number_2_Page_2_013_1.jpg" rel="prettyPhoto[pp_gal]" title="2010 Gibson Custom Shop Jimmy Page &quot;Number Two&quot; Les Paul - Used"><img src="/thumbs/images/2-23-11/Gibson_Custom_Shop_Jimmy_Page_Number_2_Page_2_013_1.jpg" alt="" title="" /></a>

Open in new window

0
 
puppyknucklesAuthor Commented:
Thanks for the reply.  Yeah I realize that the JQuery script is behaving the way it should, it really has to do with the fact that the ecommerce software provides for the "main picture" and then the "extra pictures".  But the "extra pictures" includes the main picture so this gallery is picking it up twice.  I am hoping to get some help to figure out how to omit that.  Perhaps telling the Jquery to ignore the first picture somehow.
0
 
SRigneyCommented:
If you remove rel="prettyPhoto[pp_gal]" from the main one, then it will not be included in the Pretty Photo list of images.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
puppyknucklesAuthor Commented:
Yes, but then clicking the main image, which is instinctual, also won't launch the gallery.  That breaks the functionality in my mind.  I need to either click the main image and launch the gallery, or click on the thumbnails to launch the gallery and not have the main image repeated.  
0
 
SRigneyCommented:
You may be able to fool it, since the big picture is the same as the first thumbnail.

You could remove the  rel="prettyPhoto[pp_gal]" and add id="startPrettyPhoto"

And add this to the document ready where you set up prettyPhoto

$("#startPrettyPhoto").click(function() {
  $("a[rel^='prettyPhoto']:first").click()
});

This will capture the click on the big image and make the first actual item in the pretty photo list act like it was clicked on.
0
 
puppyknucklesAuthor Commented:
You are the man.  That works!  I had to also remove the image link URL in the main image and replace it with "#" so the click wouldn't actually go anywhere but just wait for the prettyPhoto to kick in.  Thank you!
0
 
puppyknucklesAuthor Commented:
Exactly what I was hoping for, but would never have been able to figure that out.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now