Clicking a thumbnail to change the large image in a gallery - javascript

I'm trying to create the following gallery:
- One large image
- Thumbnails of gallery images below
- Large image should open all images on click in a lightbox gallery
I have the lightbox gallery working using PhotoSwipe and it fires when I click the large image. I also have the thumbnails in place below the large image. My question now is how do I change the large image when I click one of the thumbnails? I've seen a lot of examples (also quite simple ones), but none of them seem to work in my case.
Here's the code that I have for the thumbnail:
<a href="<?php echo $image['url']?>" data-size="<?php echo $image['width']?>x<?php echo $image['height']?>" data-index="0">
<img src="<?php echo $image['url']?>">
</a>
What I want is that when I click the href of the thumbnail that it changes the big image, which is display with this code:
<img class="bigimg" src="imageurl.jpg">
The thumbnail needs to have the href tag because this is required for the lightbox function to work.
I've seen some jQuery examples that replace the src of the bigimg with the src of the thumbnail, but I can't quite get it to work with the href also in place.
For reference,
this is the situation.
Example: JSFiddle

Try,
var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector.
$('.thumbnailLink').click(function() {
$('.big a').attr('href', $(this).attr('href'));
$('.bigimg').attr('src', $(this).attr('href'));
});
here is the fiddle https://jsfiddle.net/91oq8ja2/2/
Is this what you are looking for?

I'm not intimately familiar with lightbox, but if I understand you correctly, you want it to just do what it's already doing, but in addition, change the src of your img.bigimg. If that's the case, it should work to add your own listener on the a tag as long as you don't prevent the default action. Something along the lines of this:
var thumbnailLinks = $('a.thumbnailLink') // Add class="thumbnailLink" where appropriate or use a different selector.
thumbnailLinks.on('click', function() {
$('img.bigimg').attr('src', $(this).attr('href')); // Set img.bigimg src attribute to the href attribute of the link that was clicked.
});
There may be some weaknesses to this. For example I'm not sure if this will work if a user tabs through links and activates it using the enter key, though it should be possible to add other events than just click to help with that. This is also untested code at the moment, but have a go and see if it works for you.

Related

How do I use JQuery to wrap a specific image (located in the header) in an anchor tag?

I'm trying to use tag manager to inject jquery on a site in order to make an image in the header link to a specific page on the site. The code is working almost completely across the board, but not 100% (seems odd to me).
The image:
<img class="img-responsive margin-auto" src="/assets/misc/12345/image.png" alt="example" aria-label="example">
The JQuery:
<script type="text/javascript" id="img-link">
$(document).ready(function() {
$("img[src*='image.png']").wrap("<a href='example.com/image-related-page.html'></a>");
});
</script>
The image is a direct child of a div for mobile screen sizes and a list item for desktop screens (dealing with website platform here, which is the reason for tag manager.) what am I doing wrong?
Edit: the image is not clickable after the first visit to a certain page of the site (but works as expected on all other pages). unfortunately, due to me having to do this as a workaround the platform that this website is on, a minimal, complete, and verifiable example isn't really feasible.
If I understand what you are trying to do correctly it is to append an image to an anchor tag. You should give the anchor tag an Id: <a id="someId" href='example.com/image-related-page.html'></a> set a variable var img = $("<img>"); img.attr("src", "image.png"); and then with jQuery you could say $("#someId").append(img)
Try this:
$("img[src$='image.png']").wrap("<a href='example.com/image-related-page.html'></a>");
replaced * with $ according to Attribute Ends With Selector [name$=”value”]

how to autostart nanoGallery from a link

I know this has been asked before but the answers given did not work for me and my scenario is in any case slightly different.
I am just starting to evaluate nanoGallery, which looks good for my requirement which is to run a slideshow of inline image references. But I simply want to run the slideshow from a link rather than having to display a set of thumbnails and then clicking/tapping on one to actually start the slideshow. Which doesn't seem to me to be a particularly unusual requirement, especially for a very large slideshow where the set of thumbnails would occupy far too much space on the screen.
My HTML is simply:
<a id="startlink" href="javascript:void(0)" style="margin-bottom: 40px;">run slide show</a>
<div id="nanoGallery">
<a id="first" href=... data-ngdesc=... />
...
So I have tried:
$(document).ready(function () {
$("#startlink").click(function (e) {
$("#nanoGallery").nanoGallery({
slideshowAutoStart: true,
...
});
$("#first").trigger("click");
});
});
I have tried various alternatives, including placing the script block at the end of body rather than in head, simply doing click() rather than trigger("click"), referencing $("#nanoGallery").children()[0] rather than $("#first"), and so on. I have even tried the createEvent/dispatchEvent approach as suggested elsewhere. But all I ever get is the row of (in my case empty as I have not supplied thumbnail images) thumbnail blocks which I still have to click on to start the slideshow. So it is possible that nanoGallery uses a different event or events rather than click? Has anyone actually got this to work with nanoGallery?
I have also seen a suggestion to use 'deep linking' using a hash value in the URL to identify the gallery/album in question, but I have no idea how to generate or determine this value and it may be that this only works with an online image repository such as Picasa.
Jon

dynamic image changing in colorbox

Im working on the products page or an ecommerce site and currently there are 3 small images and one large image. the three small images are clickable and when the user clicks one of the images the larger image is changed to show that image using:
onMouseDown="document.Image.src=/img1.jpg;"
This works fine. The trouble I am having is when trying to link this with colorbox. What I would like to do is for the user to click one of the smaller images and then the larger image is loaded then when they click that larger image the colorbox function is called and the image is shown in the colorbox popup. Is there anyway to do this?
Currently my code shows as follows:
jQuery("a.largeImgPop").colorbox({opacity:0.4, rel:'largeImgPop', photo:true});
<a class="largeImgPop" href="/img1.jpg">1</a>
<a class="largeImgPop" href="/img1.jpg">2</a>
<a class="largeImgPop" href="/img1.jpg">3</a>
<img src="/img1.jpg" name="Image" alt="Image 1" />
Is this possible?
A couple of things.
Why not skip right to the colorbox after clicking the small image?
But assuming you have one large placeholder image and several thumbnails swapping them, this is how I would do it.
Give this an id. You can set the size to whatever you need.
<img src="/main.jpg" id="mainImg" name="Image" alt="img_placeholder" />
Try using the .click() && .live() functions with jquery.
Note: live() has been deprecated in later versions of jquery. try using on() if that doesn't work.
$(function(){
$('.largeImgPop').click(function(){
var img = $(this).attr('src');
$('#mainImg').attr("src", img);
});
$('#mainImg').live('click',function(){
$(this).colorbox({opacity:0.4, rel:'largeImgPop', photo:true});
});
});
I don't know if this will work...also I don't know why you would load one image to another. You never specified your image directory structure. You could add rel="/images/larger/img1.jpg" and get that.
And change to.
var img = $(this).attr('rel');
$('#mainImg').attr("src", img);
<img src="/img1.jpg" name="Image" alt="Image 1" onMouseDown="myFunction()"/>

What do I use to make a simple html gallery?

i'm trying to make the typical ecommerce site where you have different views of clothing and when you click it it becomes the main image.
I'm assuming javascript would be best suited for this? maybe Jquery will be easier?
Thanks I just need someone to point me in the right direction.
Send the various image file names along with the html code in a javascript array. Define "next" and "previous" links pointing to a javascript function that just sets the source of the <img> to the next/previous image.
Or, if you have mini previews, organize the images so that you have image0032_small.jpg for the mini preview and image0032.jpg for the big image, then set the onClick event of the mini image to a javascript function that reads the url of the mini image, removes the _small part and sets the image source of the big image to the result...
If you use a logical naming convention, where the zoom img = the small image + "_Zoom" (a.jpg > a_Zoom.jpg) in the filename, you can do it like this:
<img id="productZoom" src="productA_Zoom.jpg" /> <-- the large image
<a href="javascript:;// zoom in" onclick="loadZoom(this)">
<img id="productZoom" src="productB.jpg" /></a> <-- the thumbnail
function loadZoom(element) {
var zoomImg = $(element).children('img')[0].src.replace(".","_Zoom.")
$('#productZoom').attr('src',zoomImg)
}
There are a dozen ways to do it. I suggest you run a search on
simple gallery [your favorite coding tool]

need dynamic content on page using javascript

I need this page: http://winteradagency.com/mrw/index.php
so that when you mouseover the different small images (actually a set of them) the text below changes from text into an image (which is a larger image of the smaller one) I used to use Fireworks for that sort of thing but I'm thinking that there must be an easier way using a combination of a div tage and javascript.
Any ideas for something simple?
thanks!
http://fancybox.net/
lightbox, etc...
The jQuery CYCLE plugin might suit your needs. It transforms a list of elements into a scrolling pane. You could simply disable automatic scrolling on initialization, and set the time between slides to 0. Then you can call the "slide number" in the callback for the mouseover event on the smaller thumbnails.
Cycle is here: http://malsup.com/jquery/cycle/
Your application is very similar to this example: link text
This question has a similiar situation (replacing an input with an image) with an answer that might work for you. Note: it uses jQuery.
Edit:
For your situation you could do something like this for each image:
$('img#id').hover(
function() {
('div#id').hide().after('<img src="image.jpg" />');
},
function() {
('div#id').show();
}
);
changing the 'img#id' to the id of the image and 'image.jpg' to the corresponding big image.

Categories