942,960 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Aug 3rd, 2008
0

Side Scrolling Photo Gallery?

Expand Post »
I saw one of these and looked very effective and professional.

So how do I make one? Any tutorials?

Thanks, Regards X
Reputation Points: 31
Solved Threads: 10
Practically a Master Poster
OmniX is offline Offline
652 posts
since Dec 2007
Aug 4th, 2008
0

Re: Side Scrolling Photo Gallery?

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.

HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. body {
  6. text-align: center; /* IE page centering */
  7. background: silver; /* contrast */
  8. }
  9.  
  10. #viewport {
  11. width: 200px; /* viewport width */
  12. height: 140px; /* viewport heigth */
  13. overflow: auto; /* scrollbars */
  14. background: white; /* contrast */
  15. white-space: nowrap; /* image flow not stack */
  16. /* could use float: left or other approach */
  17. margin: 0 auto; /* Mozilla page centering */
  18. text-align: left; /* IE centering fix */
  19. }
  20.  
  21. #viewport img {
  22. height: 110px; /* max height scaling of images */
  23. border-width: 0; /* remove a link border on images */
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div id="viewport">
  29. <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
  30. <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
  31. <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
  32. <a href="#"><img src="http://g-ecx.images-amazon.com/images/G/01/apparel/gateway/B0013YWXZM._V255323983_.jpg" /></a>
  33. </div>
  34. </body>
  35. </html>
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Aug 4th, 2008
0

Re: Side Scrolling Photo Gallery?

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
Reputation Points: 31
Solved Threads: 10
Practically a Master Poster
OmniX is offline Offline
652 posts
since Dec 2007
Aug 4th, 2008
-1

Re: Side Scrolling Photo Gallery?

Have some good bed time reading
Moderator
Featured Poster
Reputation Points: 2786
Solved Threads: 871
Code tags enforcer
peter_budo is offline Offline
6,649 posts
since Dec 2004
Aug 4th, 2008
0

Re: Side Scrolling Photo Gallery?

The site looks informative, but has no examples of the code displayed
Reputation Points: 31
Solved Threads: 10
Practically a Master Poster
OmniX is offline Offline
652 posts
since Dec 2007
Aug 4th, 2008
-1

Re: Side Scrolling Photo Gallery?

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
Moderator
Featured Poster
Reputation Points: 2786
Solved Threads: 871
Code tags enforcer
peter_budo is offline Offline
6,649 posts
since Dec 2004
Aug 4th, 2008
1

Re: Side Scrolling Photo Gallery?

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
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Aug 4th, 2008
0

Re: Side Scrolling Photo Gallery?

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.
Reputation Points: 31
Solved Threads: 10
Practically a Master Poster
OmniX is offline Offline
652 posts
since Dec 2007
Aug 4th, 2008
-1

Re: Side Scrolling Photo Gallery?

You been warned OmniX, not all people have JavaScript enabled...
Moderator
Featured Poster
Reputation Points: 2786
Solved Threads: 871
Code tags enforcer
peter_budo is offline Offline
6,649 posts
since Dec 2004
Aug 4th, 2008
0

Re: Side Scrolling Photo Gallery?

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
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Message:
Previous Thread in HTML and CSS Forum Timeline: Developing within Facebook
Next Thread in HTML and CSS Forum Timeline: Alignment issue: trying to make a series of links images





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC