Jump to content
  • Advertisement
Sign in to follow this  
Avatar God

[web] Photo album and javascripting

This topic is 4916 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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.

Share this post


Link to post
Share on other sites
Advertisement
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";

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
Okay, along the same lines, I put the line of code in for the < div > text:


<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.

Share this post


Link to post
Share on other sites
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.


<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?

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!