http://jsfiddle.net/Pctgb/1/
In the fiddle when I click one of the images the caption appears (bottom), and when I click the image again the caption disappears (like expected) HOWEVER if I skip clicking the same image again and actually go ahead and click another image the caption in the old image stays.
Where should I look if I want the caption to be only displayed in the expanded image.
Thank you all
In your image click handler you can do this:
$('.caption').each(function(){
$(this).hide();
});
Forked: http://jsfiddle.net/DQHgg/
Related
I have a responsive image gallery that currently displays thumbnails on a page, which when clicked, will enlarge the image and open it up as a modal.
The limitations of this code are that when I have opened up the image, I have to press the 'X' button, and go back to the thumbnails in order to open up another image.
What I would like, is that when the modal opens up, with the enlarged image, there is a '<' and '>' button that allows you to scroll through the enlarged images.
Any ideas how this can be done?
I hope this was clear, if not then it will make more sense when you view it as a working example here.
Thank you for your help!
Supposing the image which is being displayed at the moment is pic1 and that you have pic2, pic3, pic4 as well.
First you need to create an array in javascript containing the location of these files. Now assuming that the id of that image is "mainpic".
var a=['pic1','pic2'....'pic4'];
var l=a.length;
var currentpic=0;
function changeright(){
documnet.getElementById("mainpic").src=++window.currentpic%window.l;
}
function changeleft(){
document.getElementById("mainpic").src=abs(--window.currentpic%window.l);
}
Now for the html part you need too superimpose these signs-
<> which you can do by using position:absolute and z index:-1. You can find the examples on w3school.
It should be something like
<aaaaaaa
And in css
enter code here
#superimpose{
position:absolute/relative;
top:100px//or some other value to move the text over the pic or use "left" and "right"
}
You could use slick, I used it at work and it is really good.
I'm using script found here:
Automatically load an image using javascript
I'm using them to build image gallery where the main image loads thumbnail image on mouseenter, but my main image begins blank not with the first thumbnail as in the answer. I need to know how to clear the main image back to blank on mouseout of each thumbnail?
Try JQuery .mouseout() like this:
$('.thumbnails img').mouseout(function () {
this.src = '';
});
Click http://jsfiddle.net/cnx65ev0/ to see it running. Hover over the images and when you leave them, they become blank. I hope this is what you wanted.
Ive got a slider with 3 circles at the bottom, when picture is displayed, the correct circle background must be turned to green, correlating to the correct image. Ive got it working, but when user clicks on a new circle, to change image, the old background color remains in place and does not disappear, as you can see from the picture example.
In the above example, the page loaded with the middel image highlighted, when user clicked the right circle the image changed, and highlighted the right circle (as it should) BUT the middle buttons highlight color remained in place...What am I missing here? Code follows:
$(document).ready(function(){
$("a").click(function(){
$("iLink").removeClass()
$(this).addClass("over")
}) ;
});
.over {
background:#008000;
}
<img id="i1" src="images/dot.png"/>
<img id="i2" src="images/dot.png" />
<img id="i3" src="images/dot.png" />
what is iLink?
$("iLink").removeClass()
change to
$('a').removeClass()
why need different class?
select that id and associate condition which one id is going to be selected than use css property of jquery or css function.
Change
$("iLink").removeClass()
to
$("a[class^='iLink']").removeClass()
because the a tags contains different classes but they all start with same name iLink
In my page i want to display a list of black&white images in grid view, when i hover the mouse over this image it displays the color image. When i move the mouse away, again the black&white image should be shown.
When i clicked a particular image (i.e- a black&white image) it should be turned to a color image at the same time in addition to this a tick mark image should be added.
I used the following script and html code
SCRIPT
$(".swap_image").live('click', function() {
if($(this).attr("class") == "swap_image") {
this.src = this.src.replace("_blackwhite", "_color");
$('#tick_' + $(this).attr('rel')).show();
} else {
this.src = this.src.replace("_color", "_blackwhite");
$('#tick_' + $(this).attr('rel')).hide();
}
$(this).toggleClass("color");
return false;});
HTML
<img id="tick_{{img.id}}" src="{{MEDIA_URL}}img/tick.png" style="position:absolute;" ><img rel="{{img.id}}" src="{{MEDIA_URL}}{{ img.logo_blackwhite }}" onmouseover="this.src='{{MEDIA_URL}}{{ img.logo_color }}'" onmouseout="this.src='{{MEDIA_URL}}{{ img.logo_blackwhite }}'" class="swap_image" />
I used the above code, all works fine but when i move the mouse out again the image turns black&white image (because i used mouseout function)
Is there any other better idea available? or
How to overcome from this issue? Thanks in Advance
I would suggest adding a class to the image when you click. Then when the mouseout function execute, simply include an if/then that only swaps the image back to black and white if the class is NOT present.
When you click the Image Then Leave some Footprint there. Like change the Class of the Image,
now in your mouseout function check the condition if the image has that particular class or not. If there do nothing, else change the image color.
I have a thumbnail image that when you click it changes a larger image on the page. So far I have the Javascript figured out for passing on the .src, .alt, and .title information that makes the picture and tool tip of the picture change.
The large picture has a caption underneath. I was wondering how to also have the caption change when the thumbnail is clicked. I'm assuming I can change it into some sort of Javascript variable but this is my first time using JS so I am still very green.
One way is to have the caption in a container with an ID, and overwrite the innerHTML of that container. i.e.
<div id="myCaption">People of Walmart</div>
<script type=text/javascript>
document.getElementById('myCaption').innerHTML = 'Whoa!';
</script>
If your caption has an ID you can select that caption and add the text through JS:
document.getElementById('id_of_the_caption').innerHTML = "Text to display";
Use that JS code in your function that changes the image.