Do not show photo twice in Prettyphoto - javascript

i have a tricky problem I'm not able to solve. I'm using jquery.prettyphoto.js to display a set of images in a "lightbox".
The first photo in that set is the "AvatarPhoto" and it's rendered twice on the page. First on top, standing alone and also in a slider with all the other photos. Both are linking to the same picture in the same gallery.
Take a look at this: http://jsfiddle.net/wtZLY/
okay I solved that based on halfer´s answer, simply gave the first link of "allFotos" an id :
$('#profilePicture').click(function() {
$('#foto_0').click();
});
but I wonder if I can´t use the prettyphoto API
$.prettyPhoto.open()
but looks like I there is no possibility to simply open the prettyPhoto[gallery1] down on the page. I would have to pass all images and titles as an Array and in my case this would be heavy repeating myself.

Your selector works on this attribute:
data-rel="prettyPhoto[gallery1]"
If it is not your intention to add the first picture to the gallery, remove the data-rel attribute from that image, and it will work.
Personally, I'd use standard tags/ids/classes for this. In your JS you could alternatively use this:
$("#allpictures a").prettyPhoto();
That will select all links that are a descendent of the allpictures element.
Addendum: if you want to open the gallery using your profile picture, then I suggest you use the above for the gallery items, but have a special click handler for the profile. Set up an id for each image, such that the profile picture can be used to determine the gallery copy. For example you could use profile_123 and gallery_123.
This will permit you to add a click handler on the profile image, derive the id of the gallery copy, and to raise the click event on that element.

Related

Google Tag Manager - Image Tracking on product page

I am working on a Shopify website, I want to track how users interact with images on the product page. let's say a user sees the first image (a tag should fire), then he scrolls on the second product image (another tag should fire), and so on.
So I can know how many images on average the user sees on a PDP, what is the conversion rate of users who see 2 images vs 3 images, etc. (On GA)
This would require a custom javascript event which has to be passed on GTM, I looked at different resources available but could not find the right way.
Any help with how to proceed with this, or resources I can refer to would help.
I think you can try the element visibility trigger.
Here is the setting detail
Add a good name about it.
Choose the CSS Selector since you have multiple images.
Set the right CSS Selector. If you don't know how to set it. You might need to give us the URL of your website and we can provide you the selector.
Choose Once Per Element
You can decide when the image shows more than x%. Fire the trigger.
Since you need the order of the image. You can refer about this
#GTMTIPS: GET POSITION INDEX OF VISIBLE ELEMENT
If you have further question. Feel free to leave comment and I'll update accordingly

adding a watermark only to target images (jquery)

I have a question regarding watermarks for images. For instance: I want to display an image (pure HTML). If a user clicks on the image however, there should be a watermark, showing where that photo comes from.
I was thinking about a layer-solution. Putting an invisible layer over the main image and link to another image instead. That would force me to have every photo two times on my server. Not the best idea.
I found a lib called watermark.js (link here: watermark.js).
However, this would only allow me to put watermarks right in the beginning.
To explain the situation: User on my site sees everything without watermark, opening it directly in the browser should add the watermark.
Another solution I had was to always apply a watermark via script, and remove it if the user is currently on my site.
Maybe you have a solution to apply watermarks only on the linked images. I'd like to realize it via jquery.
Thank you in advance.

FB.XFBML.parse() doesn't refresh Facebook comments

I have a JS photo gallery that loads individual images from an API into the page when users click a thumbnail. I'd like people to be able to add Facebook comments on each image. So I've got my Facebook comments element in the page that contains the gallery.
<div class="fb-comments" data-href="" data-num-posts="10" data-width="480"></div>
On loading the page and first populating the gallery I set the data-href attribute of the comments element to the URL for the first image (for example http://site.com/gallery/1027/1). Then if the user clicks on a thumbnail I reset that attribute to the URL for the selected image.
fbComments.attr('data-href', data.link + index);
FB.XFBML.parse();
The FB.XFBML.parse(); is what I've read you're supposed to do to get Facebook to refresh the comments. I've added a comment to one image and tried clicking on the thumbnail for an image without a comment. But my comment for the first image is still there. Can anyone suggest why?
I've tried logging out the FB object in my JS file, and it logs OK, so it is available at the point I call it. I've checked that the click event in my JS is indeed changing the data-href attribute to the right value. And when I hardcode a different data-href in the fb-comments element the comments render as expected.
I suggest that you completely remove the previous comments box from the dom, then insert a new html with the right data-href and then call the FB.XFBML.parse method.
Another thing is that you should specify where to parse, like so:
FB.XFBML.parse(document.getElementById("container-id"));

How to choose a specific thumbnail photo on like button

I have a webpage i keep adding a like button app to but whenever i click like i get some random member phot of a lady on facebook representing my page. this is frustrating.
I find all this html script and i cant seem to put it together properly so will you just please give me a simple paste ready like button formula with a set specific thumbnail photo that I can choose to represent my own page?
Use the open graph properties for your webpage defined here:
http://developers.facebook.com/docs/opengraph/

JQuery Lightbox - grouping images which are not a link

Here is what I want to achieve.
I am creating a simple online shop which displays a product grid. If I click on the photo of the product it should open up a lightbox window. However I want to be able to click Next and Prev to view images in the same gallery, however these other images in this gallery is not actually displayed on the webpage itself.
So I want to subgroup an image gallery from a single img link from the webpage. Is this possible?
Try adding all images on the page but display: none all of them except the first one.
You could create some empty anchors in the site, but with the right link in src and group in rel.
I have set up some webpages to show examples of how to use the "slimbox2" lightbox plugin. The site is http://www.trips.elusien.co.uk click on the "slimbox examples" link.
One such example shows how you might do this. Basically, as Marnix said earlier, "put some empty links" on the webpage. Or hide them via CSS "display: none".
Regards
Neil
fancybox simply allows you to create a thumbnail wrapped in an anchor and loads the enlarged image on demand.

Categories

Resources