I saw one of these and looked very effective and professional.
So how do I make one? Any tutorials?
Thanks, Regards X
OmniX 21 Practically a Master Poster
langsor
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>
<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>
OmniX 21 Practically a Master Poster
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
peter_budo 2,532 Code tags enforcer Team Colleague Featured Poster
OmniX 21 Practically a Master Poster
The site looks informative, but has no examples of the code displayed :(
peter_budo 2,532 Code tags enforcer Team Colleague Featured Poster
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
langsor
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
OmniX commented: Nice detailed response, thankyou. +1
OmniX 21 Practically a Master Poster
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
peter_budo 2,532 Code tags enforcer Team Colleague Featured Poster
You been warned OmniX, not all people have JavaScript enabled...
langsor
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
OmniX 21 Practically a Master Poster
Ya I know peter thats why I was hoping it was a css thing, maybe I can create something that implements both if people have ideas i prefer to use the languages like in this order if I have to CSS>PHP>FLASH>JAVA.
Ill get started see what I come up with.
Thanks for the help, langsor.
peter_budo 2,532 Code tags enforcer Team Colleague Featured Poster
I think you wanted to Say JavaScript instead of Java. However I admit that applet done in JavaFX is interesting too, this is because I seen presentation last week
OmniX 21 Practically a Master Poster
JavaFX, never heard of it?
New web development language?
Worth any research?
peter_budo 2,532 Code tags enforcer Team Colleague Featured Poster
Still in development process but API is already available and there is lot of info on Sun website. Require knowledge of Java!!!
bbhilda 0 Newbie Poster
I was wanting to put a scrolling gallery on my e-bay listings showing and linked to my other listings, aka Auctiva. However, when I tried to upload it, I was told that Java script was not allowed.
Does anyone know of another way to make a scrolling photo gallery? If it is not possible, how does Auctiva get away with it?
langsor
I was wanting to put a scrolling gallery on my e-bay listings showing and linked to my other listings, aka Auctiva. However, when I tried to upload it, I was told that Java script was not allowed.
Does anyone know of another way to make a scrolling photo gallery? If it is not possible, how does Auctiva get away with it?
I suspect Auctiva has signed an agreement with eBay or are in some way in business with eBay. I suspect eBay considers JavaScript either a security risk or potential to interfere with their site branding and intended functionality.
I doubt there is much you can do to include a dynamic photo gallery if you cannot use either
JavaScript, Java, Flash/Flex, or include an iFrame to your off-site gallery resource (as one of the above)...but that last option (or Flash) might be worth looking into.
Good luck
bbhilda 0 Newbie Poster
I suspect Auctiva has signed an agreement with eBay or are in some way in business with eBay. I suspect eBay considers JavaScript either a security risk or potential to interfere with their site branding and intended functionality.
I doubt there is much you can do to include a dynamic photo gallery if you cannot use either
JavaScript, Java, Flash/Flex, or include an iFrame to your off-site gallery resource (as one of the above)...but that last option (or Flash) might be worth looking into.Good luck
Thanks very much for replying Langsor, I appreciate it. Actually I think I am a bit out of my depth on this site, because I am no whiz at this by any means. However, I will do some searching and see what I can find.
Thanks again!
charlesying 0 Newbie Poster
That was great suggestion
Joralyd 0 Newbie Poster
you can set up an album/gallery with slideshow through something like flickr or jalbum then embed a snippet of code into the html of your website very very simple there are loads more options just google search "slideshow"
Richer 0 Newbie Poster
Hello. If you don't want to create your own Scrolling Gallery you can have a look at this http://www.flashxml.net/image-scrolling-gallery.html I used it last year in a project and I was very promiscuous about it, but fortunately you can customize it and change it for your needs. All the components are free, but I saw on their site that you can purchase the products and have some benefits. Anyways, for who is to lazy I highly recommend this. Good Luck!!
sheilaaellis44 0 Newbie Poster
I am having the same problem...if anyone knows how to set this up correctly please chime in.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.