they would then be able to click an image (one of the black boxes at the bottom) and have it appear large in the top section, with some corresponding text. It would be wonderful if the image at the bottom faded when it was selected, as well.
Now... I have no earthly idea how to make something like this possible. I could do it in Flash, but with 150 images, that would be crazy to load.
If this isn't something that is possible, than I can just do it more simply, where you click a 40x40 image and it pops up a new window (a la the photos section i have here).
Please help, and I know it's asking a lot.
[web] Photo album and javascripting
Author
Hm, so I need to make a photo album for a site that I run. I would like to have the page spawn one pop-up (this I can do), and then all the photos can be accessed from that page. I would like for the user to see something like this:
they would then be able to click an image (one of the black boxes at the bottom) and have it appear large in the top section, with some corresponding text. It would be wonderful if the image at the bottom faded when it was selected, as well.
Now... I have no earthly idea how to make something like this possible. I could do it in Flash, but with 150 images, that would be crazy to load.
If this isn't something that is possible, than I can just do it more simply, where you click a 40x40 image and it pops up a new window (a la the photos section i have here).
Please help, and I know it's asking a lot.
they would then be able to click an image (one of the black boxes at the bottom) and have it appear large in the top section, with some corresponding text. It would be wonderful if the image at the bottom faded when it was selected, as well.
Now... I have no earthly idea how to make something like this possible. I could do it in Flash, but with 150 images, that would be crazy to load.
If this isn't something that is possible, than I can just do it more simply, where you click a 40x40 image and it pops up a new window (a la the photos section i have here).
Please help, and I know it's asking a lot.
Fading: use the css property filter:opacity (IE) or -moz-opacity (FireFox, Netscape).
Loading: create the thumbnails and in the onclick event use javascript to change the source of the large image: document.images["largeimageorsomething"].src = "images/somenewimage.png";
Loading: create the thumbnails and in the onclick event use javascript to change the source of the large image: document.images["largeimageorsomething"].src = "images/somenewimage.png";
Author
Wow, that's nifty. I didn't even know there was a way to control tranparency in CSS!
One last thing - how do I switch blocks of text?
And I wish I could rate you up more, that's incredible.
One last thing - how do I switch blocks of text?
And I wish I could rate you up more, that's incredible.
Author
Hm, I just realized that I sadly don't know how to implement either suggestion. Again, I know it's asking a lot... but how do I adjust the transparency and image based on a click event?
Quote:Original post by Avatar God
Wow, that's nifty. I didn't even know there was a way to control tranparency in CSS!
One last thing - how do I switch blocks of text?
And I wish I could rate you up more, that's incredible.
Ironicly, my rating has gone down. [lol]
To switch blocks of text, use a span (or div) and give it an id: document.getElementById("theblockoftext").innerHTML = "some new text";
Or use multiple elements, making one visible/invisible when apropriate.
EDIT: it's gone up again, it's a rollercoaster ride!
EDIT2: reviewing your last post, I'll see if I can dig up some sample code.
Will this give you any ideas how to do it? Just made it up quickly.
<html><body><img src="http://www.gamedev.net/community/forums/themes/theme1/sitelogo.gif" id="img"><br><br>thumbs:<img src="http://www.gamedev.net/community/forums/themes/theme1/post.gif" height=20 width=20 onclick="switch_image(this.src);"><img src="http://www.gamedev.net/community/forums/themes/theme1/reply.gif" height=20 width=20 onclick="switch_image(this.src);"><br><br><input type=button value=fade onclick="fade_image()"><script language=javascript>var img = document.getElementById("img");function fade_image(){ if (document.all) // == IE img.style.filter = "alpha(opacity=50)"; else img.style.MozOpacity = "0.5";}function switch_image(url){ img.src = url;}</script></body></html>
Author
Hmm, I think so, let me play with it a bit and see...
And anyone who reads this, rate++ the wonderful man!
And anyone who reads this, rate++ the wonderful man!
Author
Alrighty, one more thing.
How do I fade the thumbnail with the same onclick as the switch image? I mean, I'll stuff them in the same function, but how do I define which image to switch dynamically?
Sorry, I don't know a whole lot of javascript :/<br><a href="http://www.utdallas.edu/~gsg031000/misc/imgswitch/test.htm" target="_blank">here's the img switching, which rocks</a>
How do I fade the thumbnail with the same onclick as the switch image? I mean, I'll stuff them in the same function, but how do I define which image to switch dynamically?
Sorry, I don't know a whole lot of javascript :/<br><a href="http://www.utdallas.edu/~gsg031000/misc/imgswitch/test.htm" target="_blank">here's the img switching, which rocks</a>
Author
Okay, along the same lines, I put the line of code in for the < div > text:
But I don't know what I'm doing, or how to pass a text variable or at least some designator along from the image.
<div id="text1">Original text.</div>...function switch_image(url){ img.src = url; document.getElementById("text1").innerHTML = "Do this!";}But I don't know what I'm doing, or how to pass a text variable or at least some designator along from the image.
I just added some extra code to the sample, but I'm not sure I'm making it any clearer.
I changed some of the variable's names.
EDIT: your code should work, maybe if you'd try a span tag instead?
I changed some of the variable's names.
<html><body><img src="http://www.gamedev.net/community/forums/themes/theme1/sitelogo.gif" id="img"><span id="txt"></span><br><br>thumbs:<img src="http://www.gamedev.net/community/forums/themes/theme1/post.gif" height=40 width=40 id="tn1" onclick="switch_large_image(this, 'the image on the left');"><img src="http://www.gamedev.net/community/forums/themes/theme1/reply.gif" height=40 width=40 id="tn2" onclick="switch_large_image(this, 'the image on the right');"><script language=javascript>var img_large = document.getElementById("img");var txt_large = document.getElementById("txt");var img_current = null;function fade_out_thumb(img_id, img_opacity){ var img = document.getElementById(img_id); img_opacity -= 5; if (document.all) // == IE img.style.filter = "alpha(opacity=" + img_opacity + ")"; else img.style.MozOpacity = img_opacity / 10; if (img_opacity > 30) // don't fade it out entirely, it would be invisible setTimeout("fade_out_thumb('" + img_id + "', " + img_opacity + ")", 50);}function fade_in_thumb(img_id, img_opacity){ var img = document.getElementById(img_id); img_opacity += 5; if (document.all) // == IE img.style.filter = "alpha(opacity=" + img_opacity + ")"; else img.style.MozOpacity = img_opacity / 10; if (img_opacity < 100) setTimeout("fade_in_thumb('" + img_id + "', " + img_opacity + ")", 50);}function switch_large_image(img_clicked, text){ if (img_clicked != img_current) { if (img_current) fade_out_thumb(img_current.id, 100); // fade out, start at opacity = 100 if (img_clicked) fade_in_thumb(img_clicked.id, 0); // fade in, start at opacity = 0 img_large.src = img_clicked.src; txt.innerHTML = text; img_current = img_clicked; }}</script></body></html>EDIT: your code should work, maybe if you'd try a span tag instead?
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
