[skyhigh007]

Yea, I saw Stu Nicholls work and its great. There's a slide problem with the list I just created. It works fine on my local host, but some how, images are not showing up when i click it on the thumbnails after i upload it to a web hosting server. It's the exact code and images, but one thumbnail is not showing the larger image. hm...

[tomdkat]

Originally Posted by skyhigh007

Yea, I saw Stu Nicholls work and its great. There's a slide problem with the list I just created. It works fine on my local host, but some how, images are not showing up when i click it on the thumbnails after i upload it to a web hosting server. It's the exact code and images, but one thumbnail is not showing the larger image. hm...

Can you post a link to the site on your server (or send me a link via PM)?

Peace...

[skyhigh007]

Nevermind, its fixed. Is it safe for the gallery to be implemented in that way because when I click on the thumbnails, on the bottom of the browser says connecting to " www.yourdomainname,com"... In terms of security is it safe? Can hackers hack the site through gallery?

[tomdkat]

Originally Posted by skyhigh007

Nevermind, its fixed. Is it safe for the gallery to be implemented in that way because when I click on the thumbnails, on the bottom of the browser says connecting to " www.yourdomainname,com"... In terms of security is it safe? Can hackers hack the site through gallery?

Are you not pre-loading the larger images? If you did, that would eliminate the need for the browser to fetch the image when the thumbnail is clicked.

I see no harm in the browser status area indicating which image is being downloaded when the thumbnail is clicked. I mean since the gallery page is being viewed at the time the thumbnail is clicked, the user already knows the URL of the site and can simply look at the HTML source to see what other URLs are referenced. I don't see how a hacker could hack your site through the gallery since they aren't able to send any information to the server. When they click the thumbnail, yes JavaScript is invoked but only to swap out an image in the local browser.

Peace...

[skyhigh007]

Thank you! How can you tell if its pre-loaded or not , Im still using your method.
Also, sorry I have another question. Is there a way where you can show to users when they click on the thumbnail, that thumbnail shows clicked or highlighted? In addition, how do you have arrows show up in the larger image when someones mouse hovers over the left adn right of the image?
Ex: http://kotaku.com/photogallery/stree...bel/1000945419

Thank you soo much

[tomdkat]

Originally Posted by skyhigh007

Thank you! How can you tell if its pre-loaded or not , Im still using your method.

Ok, I didn't do anything with pre-loading images so you'll have to either add CSS to pre-load images or use one of many JavaScript scripts out there to pre-load images for you.

Also, sorry I have another question. Is there a way where you can show to users when they click on the thumbnail, that thumbnail shows clicked or highlighted?

You could set a border when they click on the image or do something like that.

In addition, how do you have arrows show up in the larger image when someones mouse hovers over the left adn right of the image?
Ex: http://kotaku.com/photogallery/stree...bel/1000945419

Thank you soo much

I haven't seen that particular site yet but what you describe sounds like the "Light Box" gallery script. Is that what you're after?

Peace...

[skyhigh007]

Not the light box, but thanks for the link. I will do more research . If I have more questions, I will let you k now.

[tomdkat]

Ok, I see what you mean now. They are using CSS for the arrow effect. When the mouse hovers over a certain area of the image, an arrow will appear.

Study their CSS files to see how the work is done.

Peace...

[skyhigh007]

I'm think instead of putting onlcik function in each list, is there a way where I can use a loop?

[tomdkat]

So, you want the larger images to appear automatically (without any action from the user)? In one of Stu Nicholls' galleries, he has the larger image appearing on a mouse hover vs a mouse click.

Peace...

[skyhigh007]

What I meant was instead of putting the onclick function in ever list, is there a way to just put the onclick function once for all the lists.

[tomdkat]

Nope, you need to "trap" mouse events on a per-element basis with JavaScript. If you were doing it with CSS, you could define a style that could possibly handle multiple elements and even then you might need several styles to deal with each individual image you want displayed, etc.

You can look for gallery software or a script that does most of what you want and just use pre-existing code but that doesn't get around having to handle mouse events on a per-element basis.

Since you're using PHP, you could write a loop to dynamically generate the HTML for gallery and have the PHP script generate the per-element event handling code. That's always an option.

Peace...

[skyhigh007]

You meant, use PHP loop to generate the html list and put the onclick() inside the loop?

[tomdkat]

Originally Posted by skyhigh007

You meant, use PHP loop to generate the html list and put the onclick() inside the loop?

Yeah. If you're already using PHP to include header and footer sections, which I think you are based on other threads you've started, you can use PHP to generate the HTML for the gallery and have it put the onClick() events where they need to be, etc. I would imagine you would need an array of some kind to associate the larger images with the thumbnails unless you go with a numbering scheme and file naming convention.

Here is a pseudo-code example:

$imgNo=1;
$imgMax=20;
for (;imgNo <= imgMax;imgNo++) {
echo "<img src="imgThumb$imgNo.jpg" onClick="swapImg('img$imgNo.jpg','large-img');">\n"
}

So, if you had 20 images you wanted in your gallery, you would name them img1.jpg, im2.jog, etc., and the thumbnails would be imgThumb1.jpg and imgThumb2.jpg and so on. As the loop above executed, it would generate this HTML:

<img src="imgThumb1.jpg" onClick="swapImg('img1.jpg','large-img');">
<img src="imgThumb2jpg" onClick="swapImg('img2jpg','large-img');">
<img src="imgThumb3jpg" onClick="swapImg('img3jpg','large-img');">

and so on. Of course, the above code won't work exactly as written above (which is why it's pseudo-code) but it illustrates an implementation of the algorithm I have in mind. I'm sure others here with more PHP experience would be able to produce actual PHP code that could be used.

Peace...

[skyhigh007]

Thank you very much for the hint , the concept and explanation, I will try it out.