FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Help with neat Image Display Code

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Satori
So I have been seeing websites lately that have a really cool way to display images. When you click on the thumbnail, the rest of the page is dimmed and the image is displayed in the center of the page (appears to be on top of the rest of the content) in it's own little box WITHOUT opening a new window.

For an example of what I'm trying to explain, please refer to this site: http://www.smashbros.com/en_us/index.html
Here's another example (seems a little simpler as it loads faster): http://www.creationscience.com/onlinebook/LifeSciences.html

If you click on any of the images, you will see what I am talking about. There are other sites as well that use a similar way to display images.

I have examined the code and cannot for the life of me determine how to do this. I would like to start doing this on my site (though in addition to the images will be a text description as well.) Can anyone help me out?

I currently use Javascript to open a new window and pull text and image data from an array. For an example, please see any part of the gallery section of my site: http://www.satoriglass.com/gallery/pendants/round.html

Any help would be greatly appreciated!!
wumingsden
Satori wrote:
So I have been seeing websites lately that have a really cool way to display images. When you click on the thumbnail, the rest of the page is dimmed and the image is displayed in the center of the page (appears to be on top of the rest of the content) in it's own little box WITHOUT opening a new window.

For an example of what I'm trying to explain, please refer to this site: http://www.smashbros.com/en_us/index.html
Here's another example (seems a little simpler as it loads faster): http://www.creationscience.com/onlinebook/LifeSciences.html

If you click on any of the images, you will see what I am talking about. There are other sites as well that use a similar way to display images.

I have examined the code and cannot for the life of me determine how to do this. I would like to start doing this on my site (though in addition to the images will be a text description as well.) Can anyone help me out?

I currently use Javascript to open a new window and pull text and image data from an array. For an example, please see any part of the gallery section of my site: http://www.satoriglass.com/gallery/pendants/round.html

Any help would be greatly appreciated!!


I looked at the source code. A class is called with the images called "thickbox". I looked back at the source code and this class is defined in this file.

The site is: http://jquery.com/demo/thickbox/
alem
I learned that it is called lightbox.

You can visit http://www.huddletogether.com/projects/lightbox2/ and http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm.
Satori
Wow!! Thank you guys soooo much! Those two scripts look SWEET. I think I like the overall look and function of the Lightbox over the Thickbox...so that's the one I'll try out. Once I have it all implemented, I'll post here again and you guys can check it out!


Thanks again!
Satori
Ok...new question Smile I have put up a test page using the Lightbox script. It works great...but I'm now trying to figure out how I can include text under the picture in the box. Can someone help me out here?

Here's the test page:
http://www.satoriglass.com/gallery/pendants/teardroptest.html

Also, the regular page, so you can see the info I'd like to include:
http://www.satoriglass.com/gallery/pendants/teardrop.html

I'd rather not type all the info into the title attribute...as that would be a pain and wouldn't necessarily display properly (in the center in separate paragraphs.) Also, it'd be nice if all the info could be kept in javascript arrays so it can easily be modified later.

Please help! Smile
Satori
Nevermind everyone!

I have figured it all out myself.

Please check out my new and improved gallery area! Be sure and click on the thumbnails and watch the magic!

http://www.satoriglass.com/gallery.html
sonam
Hi,
it is wery nise site Very Happy but I have two small suggestion about your script. First of all check are you insert lightbox everywhere because I find number 3 on http://www.satoriglass.com/gallery/pendants/round.html
what open link in new window.
Second, insert somewhere close button because is very bad if user cannot go out of lightbox and must close full window.

Sonam
Satori
sonam wrote:
Hi,
it is wery nise site Very Happy but I have two small suggestion about your script. First of all check are you insert lightbox everywhere because I find number 3 on http://www.satoriglass.com/gallery/pendants/round.html
what open link in new window.
Second, insert somewhere close button because is very bad if user cannot go out of lightbox and must close full window.

Sonam


I double checked the code, and I'm not sure why #3 opened a new window for you, as it is coded the same as the rest (and works properly for me.) Is it possible you middle clicked it? (which opens a new tab in some browsers.)

Also, I actually removed the close button as I thought it was pretty worthless...because all you have to do is click anywhere other than on the lightbox to close it.

Thanks though!
sonam
Quote:
Is it possible you middle clicked it? (which opens a new tab in some browsers.)


Maybe I middle clicked it, I didn't try all your thumbs or look in the code.

Quote:
Also, I actually removed the close button as I thought it was pretty worthless...because all you have to do is click anywhere other than on the lightbox to close it.


Hmmm, I am thinking like ordinary user, not like programer. If I cannot see close button I will close window. The most people didn't have your Internet knowledge and they are thinking in different way then you. Rolling Eyes

Sonam
Satori
sonam wrote:

Satori wrote:
Also, I actually removed the close button as I thought it was pretty worthless...because all you have to do is click anywhere other than on the lightbox to close it.


Hmmm, I am thinking like ordinary user, not like programer. If I cannot see close button I will close window. The most people didn't have your Internet knowledge and they are thinking in different way then you. Rolling Eyes

Sonam


I do see your point. The reason I removed the close button was because I could not figure out how to keep it in place when I added a description to each picture. The description pushed the button to the bottom of the window (it should be located just under the bottom right corner of each image)

To see an example of where the button SHOULD be, go here: http://www.huddletogether.com/projects/lightbox2/

When a user clicked the close button, the highlight of the button created a scrollbar (for a brief second) within the description area, just before the box closed. It looked bad. So I modified the lightbox.js so it no longer generated the close.gif.

Thus I ended up with what you see in my gallery when you open an image: http://www.satoriglass.com/gallery/pendants/round.html

If anyone can help me put the close button back where it should be (while keeping the description properly in place) I'd be very grateful. I made a few modifications to the lightbox.js code in order to include a proper description with the image. I also modified the lightbox.css file so that the description displayed properly. The css is what was pushing the close button to the bottom (the area of the description had previously been set to 70% of the width and the close.gif was floated to the right of that...this caused the description, when centered, to center itself offcenter as it was only allowed to take up 70% of the width. I changed it to 100% of the width so it centered properly, which in turn pushed the floated close.gif to the bottom of the window.) I don't know how to have it both ways!

Can anyone help out?

Here's the links to both the js and the css coding:

http://www.satoriglass.com/js/lightbox.js
http://www.satoriglass.com/css/lightbox.css

Thanks!
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.