Solved

Prevent PrettyPhoto JQuery From Duplicating First Image

Posted on 2011-09-25
7
2,969 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
AWS Certified Solutions Architect - Associate

This course has been developed to provide you with the requisite knowledge to not only pass the AWS CSA certification exam but also gain the hands-on experience required to become a qualified AWS Solutions architect working in a real-world environment.

 

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

Get HTML5 Certified

Want to be a web developer? You'll need to know HTML. Prepare for HTML5 certification by enrolling in July's Course of the Month! It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…
Suggested Courses

628 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