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.

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

HTML/CSS Hover over image for close up image/test/hyperlink

I'm building a resource website for the facility I work and need help with a script.
I have an image of multiple medications that i'd like to hover to display more info. The following link is an example i found online.
image link
I'd like to be able to hover each medication to have a window pop up next to it with a close up image, the name of the drug, and a hyper link to an external site. What would the easiest way to achieve this.
Thanks so much!

Use an image map and some javascript mouse event action. The main image is an image map with rectangular/circular 'area' regions. Infos are put into 'div' blocks that are made visible/invisible with style property 'display' set to 'block' or 'none'. The init() function makes all 'div' blocks invisible at start.
HTML:
<img src="XYZ" alt="medications" usemap="#medsMap">
<map name="medsMap">
<area shape="rect" coords="x,y,w,h" onmouseover="showInfo('med1')" onmouseout="hideInfo('med1')" >
<area shape="circle" coords="x,y,r" onmouseover="showInfo('med2')" onmouseout="hideInfo('med2')" >
</map>
<div class="medInfo" id="med1">
// All your html about medication 1
</div>
<div class="medInfo" id="med2">
// All your html about medication 2
</div>
Javascript:
window.onload = init;
function init(){
var infos = document.getElementsByClassName('medInfo');
for (var i=0, i<infos.length, i++){
infos[i].style.display = 'none';
}
}
function showInfo(divId){
document.getElementById('med1').style.display = 'block'
}
function hideInfo(divId){
document.getElementById('med1').style.display = 'none'
}

easiest may not be the best in the case... however a simple solution would be something with abosolute positioned divs inside a relative positioned container div with the image set to the background. you could assign a click handler to each one to grab the data from an object and populate the target... the data might look something like this
var myItems = {
item1: {
img: 'http://www.photo-dictionary.com/photofiles/list/6666/8841blue_pill.jpg',
headline: 'the blue pill',
body: 'this pill is blue and comes in a purple box'
},
item2: {
img: 'http://www.photo-dictionary.com/photofiles/list/6679/8857red_pill.jpg',
headline: 'the red pill',
body: 'this pill is red and comes in a red box'
}
};
here is an example of that concept in a fiddle
http://jsfiddle.net/pixelchemist/3fL8P/

It's difficult to give a "good" answer without seeing what the actual data is you wish to display. However from what you have provided the most accessible method would be to use an HTML image map.
Here are the MDN docs for the separate HTML elements you will need to use:
Map link
Area link
Essentially you define rectangles, circles or polygons (using coordinates) which "overlay" the associated image. Each area can have an alt attribute which screen readers will be able to use for those viewing your site with visual impairments. The href attribute will provide you with the link to the external site.
Now there are several offline tools that can help you create image maps, here is an online one ...I am not necessarily recommending it over others, however it will provide you with an idea of how they work.
Once you have the accessible version in place, you can use JavaScript to provide extra functionality on top of that. How you wish to do that is really up to you, and again would be defined by the exact content you wish to display, and there are several pre made scripts out there for the purpose, however if you were simply wanting to display the alt/href in a basic tooltip then it wouldn't require more than a few lines of bespoke HTML/JavaScript.
Again, without recommending them, here are a couple of common solutions:
solution 1 and solution 2
Even if this is not exactly what you are looking for, it should provide you with some help at deciding your final solution.

Simple JavaScript Slideshow with NO preloading

I think this is a very simple question, so forgive me if it's been answered elsewhere. I looked but wasn't able to find what I was looking for. I have very little experience with JavaScript.
I have a many simple JavaScript slideshows contained on a single page that advance via a mouse click. See below for the code I'm using, which I've lifted from one of the introductory JS sites. This preloads each image from each slideshow when a user visits the page. I would like the script to NOT preload each image, and instead load the next image only when the user clicks to advance the slideshow. This is to reduce load time, since most users will not encounter most images. Is there an easy way to convert this into something that doesn't preload each image?
<SCRIPT LANGUAGE="JavaScript">
var i=0
var imgs=["/a.jpeg","/b.jpeg","/c.jpeg","/d.jpeg","/e.jpeg"]
function slide(){ {i=i+1} {if (i==5) {i=0}} {document.img.src=imgs[i]} }
</SCRIPT>
And the code for when the slideshow is called:
<IMG SRC="/a.jpeg" NAME="img">
Thanks!
- Patrick

Images start to load once they have a src attribute set, unless (unofficially) the element's css display property is set to none.
So, as long as you don't set the source of the img element or JS Image object, as appears to be the case in the code you posted, the image will not start loading.

Using you images array,
var imgs = ["/a.jpeg","/b.jpeg","/c.jpeg","/d.jpeg","/e.jpeg"]
You can do this:
function preloadImages(){
for(var i=0 ; i<imgs.lenght ; i++) {
img = new Image();
img.src = "img/" + imglist[i];
}
}
This function will preload all those images, so when you do the slide() the images are in browser cache.
This method doesn't work in all browsers, so when I need to do this trick, I also use a div with the size of 1x1 pixel (positioned outside the view) with all the images, like this:
<div>
<img src="/a.jpeg" />
<img src="/b.jpeg" />
...
</div>
This will also load all the images as soon as possible...

Ah, thank you all for your responses. They've led me to my answer, which is just that I made a very silly mistake. I misunderstood the results from my website's analytics test, which seemed to indicate that all images were being downloaded into the cache. This was just a goofball misreading of the results that led me on a wild goose chase, which was sustained by my lack of JavaScript understanding. I realized it after going back to the test to respond here. It all behaves as I intended with a minor adjustment. Thank you!

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.