We Keep Coding

Clicking a thumbnail to change the large image in a gallery

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.

Need to place Random images (on page refreshed/reloaded) on Wordpress header banner

Currently i using a header banner with theme option, where my banner code looks like
<img src="#" alt="" title="" />
that i can use a single image in my above banner.
But now my advertiser want me to use two images instead of one (advertise link remain same), where images will be change randomly each time page is loaded/refreshed.
Please, help me on this issue.
Thanks!

using php rand(1,2); function that return 1 or 2 , then using this random value to show image url on img src.
this may help
https://wordpress.org/support/topic/random-imagelogo-on-header

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()"/>

Lightbox2, wrong count because of additional text link?

I'm using Lightbox2 in a fairly standard implementation: click on an image in a series (all with rel="lightbox[gallery]") and it opens in the Lighbox with the next/prev arrows pointing to the next and previous image in the series. I also have a text link that points to the first image and opens the gallery (also with rel="lightbox[gallery]").
The problem is that, for some reason, that text link is counting as an image in the series. So when the 6 image gallery loads, it claims there are 7 images (the first counting twice). What's more is that it loads on image 2 of 7, skipping the first one (which is a duplicate anyway).
If I remove that text link, all is well. But, of course, I can't. So what are my options? Can I use javascript to initiate the Lightbox (so the link doesn't count as an image in the gallery)? Anyway, code:
<script type="text/javascript" src="lightbox.js"></script>
<!-- THIS IS THE TEXT LINK. NOTE THAT IT IS IDENTICAL TO THE FIRST IMAGE LINK -->
View Gallery
<!-- THESE ARE THE GALLERY IMAGES. NOTE THAT THERE ARE 6 OF THEM. WHEN GALLERY LOADS, IT WILL THINK THERE ARE 7 BECAUSE OF THE TEXT LINK ABOVE -->
<img src="first_sm.jpg">
<img src="second_sm.jpg">
<img src="third_sm.jpg">
<img src="fourth_sm.jpg">
<img src="fifth_sm.jpg">
<img src="sixth_sm.jpg">

Figured it out! I added an id to the first image:
<a id="first_img" href="first.jpg" title="I am image one of three" rel="lightbox[gallery]"><img src="first_sm.jpg"></a>
Then I change the text link to a <span> with an onClick like so:
<span onclick="$('#first_img').click();">View Gallery</span>
I styled the <span> to look and behave like a link, and voila!
(Sometimes all it takes is writing out your question to get to the answer!)

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]