Solved

Prevent PrettyPhoto JQuery From Duplicating First Image

Posted on 2011-09-25
7
2,925 Views
Last Modified: 2012-06-27
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
Comment
Question by:puppyknuckles
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 15

Expert Comment

by:SRigney
ID: 36600844
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
 

Author Comment

by:puppyknuckles
ID: 36601434
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
 
LVL 15

Expert Comment

by:SRigney
ID: 36709981
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:puppyknuckles
ID: 36710955
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
 
LVL 15

Accepted Solution

by:
SRigney earned 500 total points
ID: 36711902
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
 

Author Comment

by:puppyknuckles
ID: 36711982
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
 

Author Closing Comment

by:puppyknuckles
ID: 36711987
Exactly what I was hoping for, but would never have been able to figure that out.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question