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.
Related
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
using the code from http://touchslider.com
1.) how can the "currentClass" (the image it starts with) be set to random?
so any one of the images will appear on load?
2.) how can you toggle the script by clicking on an image?
to be more specific, there are navigation links and the images that you can click/swipe
how can you set it up so that when you click on an image, it locks to that image, disabling the navigation links and swipe??
edit: 2nd option solved +
I was able to work around editing the touchslider.com script, and made the 2nd option requested possible by using a transparent div.
JS (in body)
<script>
$(document).ready(function(){
var $content = $("#disablediv1").hide();
$(".lock").on("click", function(e){
$content.toggle();
});
});
</script>
HTML (wrap image)
<a class="lock" href="#"><img src="IMAGELINK"></img></a>
HTML (transparent div positioned over links to be disabled)
<div id="disablediv1"></div>
CSS (for transparent div)
#disablediv1{
position:absolute;
left:200px;
top:20px;
width:600px;
height:544px;
z-index:999;
}
^hopefully someone will find that helpful.
*I'm still looking for a way to have the slider show it's first image at random...
I tidied up the original HTML and CSS in the touchslider example.
http://touchslider.com/
Working example.
http://jsfiddle.net/jvt7U/1/
This works like an image preloader, for efficiency. Image src is excluded from the HTML and there is an array present for images, named gallery.
There are two loops. The first loop sets the random order in the array structure. For example:
2,0,1
1,2,0
0,1,2
The second loop assigns the image location, based on the image path from the gallery array.
Random Generator.
You can search around for better random number generators, and just replace the code here.
// Randomize the Array
galleryPosition.sort(function() {return 0.5 - Math.random()});
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/
This problem was not solved.. it was just evaded.. so dont use this as reference
what i have is
<div>
<img onclick='this.style.display="none";this.parentNode.getElementsByTagName("div")[0].style.display="block";this.parentNode.getElementsByTagName("div")[0].style.width=this.offsetWidth+"px";this.parentNode.getElementsByTagName("div")[0].style.height=this.height+"px";' src='http://static.***.pl/cache/***.pl/math/cafc682a15c9c6f1b7bb41eb004d6c45935cbf06434221f7201665f85242cb94.png'/>
<div onclick='this.style.display="none";this.parentNode.getElementsByTagName("img")[0].style.display="inline";' style='display:none'>
<pre style='width:100%;height:100%;'>
\lim_{t\to\infty}\int\limits_1^{t} \frac{1}{x^2}\,dx=\lim_{t\to\infty}\left(-\frac{1}{x}\right)\bigg|_1^t=\lim_{t\to\infty}\left(-\frac{1}{t}-\left(-\frac{1}{1}\right)\right)=\kappa=1880154404
</pre>
</div>
</div>
yes i know its ugly but well..
my problem is when i click the image it does what i want but if i then click the div it only works if i click on the text and i want it to work for the full div !
i dont want to use document.getElementById etc...
there will be multiple instances of this code and it will be in unknown places.
i really dont want to write up bloated code to do this (this includes jQuery,flash,.NET, Zend Engine etc etc...)
my question is simple :
why the hell does it work only if i click on text and how to fire onclick for the whole div
In your original Javascript action, you were setting the width and height of your div to zero, which means that there is no area to click on.
Here is a demo: http://jsfiddle.net/audetwebdesign/ndKqM/
which should demonstrate the fix. I added some background color and padding to show the dimensions of the various boxes.
I removed the parts of the JS that calculated width and height and that fixed the issue.
If you click on the lime green area that holds your text, the action works.
Unless there is some other reason, you don't need to adjust width or height.
It's hard to tell what behavior you really want.
You are setting the image to display:none, and then you set the style.height and style.width of the sibling div to image.height and image.width. So - those will both be zero (as display:none is set for the image).
Do yourself a favor and set background colors or borders for your divs so you can see what's going on as you code.
Use an A tag with your onclick event and a null URL href="javascript://" instead of a DIV
When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.
http://www.bing.com/images/search?q=Heros&FORM=BIFD#
I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.
If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.
It's the same image. It just enlarges it slightly.
Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:
HTML:
<div id="image1" class="image" onmouseover="showImg(1);">
Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
Here's the enlarged image and info about the picture
</div>
Javascript:
function showImg(num){
document.getElementById('bigImage' + num).style.display='block';
}
function hideImg(num){
document.getElementById('bigImage' + num).style.display='none';
}
CSS:
.bigImage{
display:none
}
They also use a fancy transition thing like scriptaculous's effect-grow found here.