• Advertisement
Sign in to follow this  

[web] Photo album and javascripting

This topic is 4680 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
Hmm, I think so, let me play with it a bit and see...

And anyone who reads this, rate++ the wonderful man!

Share this post


Link to post
Share on other sites
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 :/
here's the img switching, which rocks

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
The fade doesn't work in FF, but danged if it doesn't rock in IE.

I didn't even know it was possible for javascript to do this stuff.

*playing around with code to figure it out*

//edit. Damn, now I'm a lot more confused. I don't want to have IE or FF resize my images to thumbnails, for the sake of loading, skewing, and cause I want to crop the thumbnails myself. So, I want to click on a thumnail, have that thumbnail go grey, and switch the image. *cries*

*still playing around with code, seems to be making a little more sense*

Share this post


Link to post
Share on other sites
Quote:
The fade doesn't work in FF, but danged if it doesn't rock in IE.

Oops, my fault. Should be img_opacity / 100 instead of img_opacity / 10.
Internet Explorer uses a range of 0-100, FireFox uses 0-1.

Quote:
I don't want to have IE or FF resize my images to thumbnails, for the sake of loading, skewing, and cause I want to crop the thumbnails myself.

Well, ofcourse you don't want that. It was just easier for me to make that code snippet.
In my example, it takes the url of the thumb image to change the url of the large image. You could change the functions a little, and parse the url of the full image (removed most of the original code):


<img src="thesmallimage.jpg" onclick="switch_large_image('urloflargeimage.jpg', 'some text')">

<script language=javascript>

function switch_large_image(url_of_that_really_large_image, text_to_display)
{
img.src = url_of_that_really_large_image;
txt.innerHTML = text_to_display;
}




Quote:
*cries*

*shocked, suddenly realizes he made God cry*

Quote:
still playing around with code, seems to be making a little more sense

Good. I'll have to call it a night, so I won't be able to answer any question for the first eight hours or so. Good luck!

Share this post


Link to post
Share on other sites
Okay, so the basic code is simple...


<img src="large1.gif" id="img">
<div id="txt">original text</div><br><br>

<img src="small1.gif" id="tn1" onclick="switch_image('large1.gif', 'sally1');">
<img src="small2.gif" id="tn2" onclick="switch_image('large2.gif', 'sally2');">

<br><br>
<script language=javascript>

function switch_image(url, text)
{
img.src = url;
txt.innerHTML = text;
}




...and that is about the extent of it that I understand. The fade seems prone to being buggy (initial click, fast clicking), and quite honestly, I'm not going to be able to figure it out, and I don't want you to have to write code for all the eventualities [grin]. But I would love to figure out how to fade the thumnail that gets clicked, and to un-fade the previous one

Share this post


Link to post
Share on other sites
But thank you so much, wanmaster [grin]. I'll see if I can figure out the rest of it tonight [grin].

Share this post


Link to post
Share on other sites
Guest Anonymous Poster
Is there any support for the fade command in Safari for macs?

If not, that's cool - the fading isn't necessary like the image switching is (which works just fine).

And now that I'm a little calmed down, I think I can figure out the rest of the code...

-Avatar God, who can't remember his login info

Share this post


Link to post
Share on other sites
You might want to try the opacity CSS attribute. It's defined for CSS3 (see here) and there might already be some support for that under Safari/Opera. It's the same as Mozilla/Firefox -moz-opacity except for the -moz- prefix. Mozilla has a tendency to prefix CSS3 attributes with that (presumably because CSS3 isn't a W3C recommendation yet so the specs could still change).

Share this post


Link to post
Share on other sites
Cool, I'm still working on the opacity stuff, but I at least put up the other part.

edit - no, I haven't uploaded it, lol.

Share this post


Link to post
Share on other sites
Quote:
Original post by Avatar God
Cool, I'm still working on the opacity stuff, but I at least put up the other part.

edit - no, I haven't uploaded it, lol.

*still waits anxiously, does not dare to go offline and miss the grand opening*

[lol]

Share this post


Link to post
Share on other sites
Well, I feel dumb right now. I can't figure out how to adjust the style of my div bar for the text. Is there some trick to it that I don't know...?

That is, I'd like to slap a class="phototext" on it and mess with it's CSS styles, but that doesn't seem to work...

Oh, and I removed the opacity stuff from that version, still don't have it all down yet.

*Is glad GDNet doesn't show the pathetic number of edits I make to each post*

Share this post


Link to post
Share on other sites
use the className property:


var div = document.getElementById("myDiv");
div.className = "phototext";

Share this post


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

  • Advertisement