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.
Related
I have a bootstrap table which contains information about real estates:
Each real estate has many images. I just show one of them in bootstrap table. What I want is when user clicks on the existing image I want to show other related ones as gallery using jQuery or Javascript. Is there any solution for that?
Is there a way in JS/jQuery to "block" the loading of certain images in the DOM, up until a certain event occurs?
In my case, I have a page of products (WooCommerce Shop page) where clicking a product opens a modal window containing the image gallery of that particular product. But instead of loading galleries of all products on page load (too slow) I'd like to bind the loading of the image gallery to the opening of the modal window.
I'm guessing it's not really possible but perhaps there's some trick that comes close?
You can add an img element in your modal window without any src attribute and update the src attribute based on the product selection.
Here's a Pen showcasing the idea :)
A satisfying way to achieve the same end result is to sabotage the src attribute of images, and then restore this attribute later on with JS.
Found at https://stackoverflow.com/a/5402812/871404 (thanks #arkantos too!)
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.
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.
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"));