HTML and CSS

Side Scrolling Photo Gallery?

•

Join Date: Dec 2007

Posts: 641

Reputation: OmniX is an unknown quantity at this point

Solved Threads: 10

OmniX

Offline

Practically a Master Poster

Side Scrolling Photo Gallery?

Aug 3rd, 2008

I saw one of these and looked very effective and professional.

So how do I make one? Any tutorials?

Thanks, Regards X

"You never stop learning." - OmniX

•

Join Date: Aug 2008

Posts: 383

Reputation: langsor is an unknown quantity at this point

Solved Threads: 35

langsor

Offline

Posting Whiz

Re: Side Scrolling Photo Gallery?

Aug 4th, 2008

I'm sorry -- you saw one of what?
Providing a link to what you're referring to would help.

If you mean a photo gallery window that scrolls left to right -- you might try using a div element with a scrollbar to make your window, and place the picture thumbnails inside of that.

If my example below is not what you had in mind, please clarify.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
 
<html>
<head>
<style type="text/css">
body {
  text-align: center; /* IE page centering */
  background: silver; /* contrast */
}
 
#viewport {
  width: 200px; /* viewport width */
  height: 140px; /* viewport heigth */
  overflow: auto; /* scrollbars */
  background: white; /* contrast */
  white-space: nowrap; /* image flow not stack */
    /* could use float: left or other approach */
  margin: 0 auto; /* Mozilla page centering */
  text-align: left; /* IE centering fix */
}
 
#viewport img {
  height: 110px; /* max height scaling of images */
  border-width: 0; /* remove a link border on images */
}
</style>
</head>
<body>
<div id="viewport">
  <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
  <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
  <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
  <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
body {
  text-align: center; /* IE page centering */
  background: silver; /* contrast */
}

#viewport {
  width: 200px; /* viewport width */
  height: 140px; /* viewport heigth */
  overflow: auto; /* scrollbars */
  background: white; /* contrast */
  white-space: nowrap; /* image flow not stack */
    /* could use float: left or other approach */
  margin: 0 auto; /* Mozilla page centering */
  text-align: left; /* IE centering fix */
}

#viewport img {
  height: 110px; /* max height scaling of images */
  border-width: 0; /* remove a link border on images */
}
</style>
</head>
<body>
<div id="viewport">
  <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
  <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
  <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
  <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
</div>
</body>
</html>

•

Join Date: Dec 2007

Posts: 641

Reputation: OmniX is an unknown quantity at this point

Solved Threads: 10

OmniX

Offline

Practically a Master Poster

Re: Side Scrolling Photo Gallery?

Aug 4th, 2008

I found an example website, pretty close to what I am looking for:
http://www.bourakis.com.au/gallery-contemporary.htm

See how it lets you scroll and then expands and dims the back when an image is selected.

Your example is a very simple version of the above, is it a possible starting basis?

Thanks, Regards X

"You never stop learning." - OmniX

•

Join Date: Dec 2004

Posts: 4,400

Reputation: peter_budo has much to be proud of

Solved Threads: 502

peter_budo peter_budo is online now

Online

Code tags enforcer

Re: Side Scrolling Photo Gallery?

-1

Aug 4th, 2008

Have some good bed time reading

Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
LJC - London Java Community, Graduate & Undergraduate Software Development Community, JAVAWUG (Java Web User Group), The London Android Group

•

Join Date: Dec 2007

Posts: 641

Reputation: OmniX is an unknown quantity at this point

Solved Threads: 10

OmniX

Offline

Practically a Master Poster

Re: Side Scrolling Photo Gallery?

Aug 4th, 2008

The site looks informative, but has no examples of the code displayed

"You never stop learning." - OmniX

•

Join Date: Dec 2004

Posts: 4,400

Reputation: peter_budo has much to be proud of

Solved Threads: 502

peter_budo peter_budo is online now

Online

Code tags enforcer

Re: Side Scrolling Photo Gallery?

-1

Aug 4th, 2008

Sorry matte I'm not expert on PHP and I went only by google. Try to ask in PHP section of the forum, I'm sure they will be able to point you to good links

•

Join Date: Aug 2008

Posts: 383

Reputation: langsor is an unknown quantity at this point

Solved Threads: 35

langsor

Offline

Posting Whiz

Re: Side Scrolling Photo Gallery?

Aug 4th, 2008

Darn, I made a long reply last night before going to bed but it seems to not have posted here.

The scrolling and pop-up window of the gallery you showed me is using JavaScript. You could also use Flash to create these effects. The gallery example you gave works in IE 7 but breaks on Firefox 3 (the two I tested it on). It could be made to work cross-browser though.

The scrolling is produced with a window.scrollTo() or window.scrollBy() type functions, where you target the <div> window and you can specify it's horizontal or vertical scroll with a mouse click event.

The pop-up window is produced with JavaScript and CSS using the display: none; and then showing the pop-up div again when someone clicks a thumbnail image. document.getElementById('pop-up').style.display = 'block';
Of course there are other styles and scripting involved to make it look and work smoothly, but these are the basic principles involved with this gallery.

There is a gallery I created that does not have the vertical scrolling effect you want, but does have some interesting image display functionality using JavaScript, like an image-loading animation and stuff like that. You can view it here, just click on one of the thumbnails to see the image display page.
http://www.freshgrok.com/samples.php
Let me know if you want to use any of the scripting there.

Enjoy

•

Join Date: Dec 2007

Posts: 641

Reputation: OmniX is an unknown quantity at this point

Solved Threads: 10

OmniX

Offline

Practically a Master Poster

Re: Side Scrolling Photo Gallery?

Aug 4th, 2008

how funny peter, I needed javascript after all hahaha

langsor I appericate the repeated help.

I wasnt too sure what was used,

Is it possible to do the same thign with CSS, php, etc?

Well possible you can point me into a small example of the website i mentioned or tutorial somewhere?

Ill try code off my head in the morning umtil something is found.

Thanks, Regards X

Last edited by OmniX; Aug 4th, 2008 at 1:49 pm.

"You never stop learning." - OmniX

•

Join Date: Dec 2004

Posts: 4,400

Reputation: peter_budo has much to be proud of

Solved Threads: 502

peter_budo peter_budo is online now

Online

Code tags enforcer

Re: Side Scrolling Photo Gallery?

-1

Aug 4th, 2008

You been warned OmniX, not all people have JavaScript enabled...

•

Join Date: Aug 2008

Posts: 383

Reputation: langsor is an unknown quantity at this point

Solved Threads: 35

langsor

Offline

Posting Whiz

Re: Side Scrolling Photo Gallery?

#10

Aug 4th, 2008

It is true that not everybody has JavaScript enabled in their browser, or the Flash plugin either.

You can NOT do this with PHP, you need some way to manipulate the browser DOM (document object model) on the page after it's been loaded by the browser. PHP, Perl, etc. are all server-side manipulation and then publish static results to the browser -- after they send it off to the browser there is nothing much else they can do but wait around for another request.

You can however have a fallback state that works for your gallery if JavaScript is not enabled, and then use the JavaScript to change from the static to the scripted-dynamic state...this is a sure fire method to know if JavaScript is enabled and give your visitors a value-added experience if it is.

I will try and put together a little example, but might not have time since I have other things scheduled for this day.

Good luck