Comments
Help: Javascript rotater - adding border to thumbnail of current image
Written By lalindsey on Jan. 8, 2008.
3 Comments
Report Note
+ Clip This
Ok, so this is probably something simple, but I'm no javascript queen, so if someone could help me do this I would be so appreciative.
I'm using Javascript to rotate the 5 featured stories I choose via a Wordpress plugin. So right now it looks like this:
http://cssgirl.com/demos/slashfilm/wordpress
I've put the two code samples on pastebin so that makes it easier for anyone to read (Javascript | HTML)
So, via this plugin I'm given several variables to use to display the image, the title, the tagline and url. I'm using a very simple (and probably really clunky) Javascript to rotate the big image (and it's attributes) every few seconds. What I want to do is have the border of the thumbnail change when the big images matches the thumbnail. So for when the "img5" story shows in the rotater I want the thumbnail of that image to have a border.
This is the javascript I am currently using:
So I have a p tag in my body section and then the large image is rotated via that.
I know the logic of what I want, but I'm not sure how to accomplish that via javascript. I know I want it to say "if the ID of the big image is img1 than put a border on the image with the id of img1_thumb (each of the smaller images has an id of img#_thumb)", if it's img2 than the border goes off img1 and onto img2, etc up until img5/img5_thumb.
This is currently what I have in the body where the image displays:
I'm in the process of learning Javascript/DOM scripting, but just haven't quite got what it takes to code it without the expert knowledge of others, so again anyone that could help it would be great.
lalindsey
Written Jan. 9, 2008 / Report /
Ok, I know that I may be a complete doofus when it comes to this stuff, but I've been trying a bunch of different things myself and I came up with this if statement (which I know is wrong because when I use it the roating image doesn't display), but am I going in the right direction?
if (items[0]) {document.getElementById("img1_thumb").style="border:2px #2dbb0c solid;padding:0;";
}
elseif (items[1]) {
document.getElementById("img2_thumb").style="border:2px #2dbb0c solid;padding:0;";
}
elseif (items[2]) {
document.getElementById("img3_thumb").style="border:2px #2dbb0c solid;padding:0;";
}
elseif (items[3]) {
document.getElementById("img4_thumb").style="border:2px #2dbb0c solid;padding:0;";
}
else(items[4]) {
document.getElementById("img5_thumb").style="border:2px #2dbb0c solid;padding:0;";
}
posure
Written Jan. 9, 2008 / Report /
A better solution might be to just have all of your HTML in the HTML itself and then just have a dynamic class on your parent "entry" element, handling the hiding and changing styles with CSS.
Something like the following: pastebin (css/js/html all included)
lalindsey
Written Jan. 9, 2008 / Report /
Thanks for the suggestion, I tried the code and the rotation didn't work though, and the border styles didn't show.
I've also tried creating a function called switchBorder() which you can see via pastebin with the entire javascript.
The rotation now works, but I can't get the borders of the thumbnails to "rotate" along with the main image.