473,396 Members | 1,871 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

Image Gallery

Hi All,

I need to know if one can create an auto image gallery/slideshow with 5 images wherein the pictures fade in & out and the animation stops on the last frame as the last image is a world map with rollovers for global offices.

I know this can be done through Flash as well but due to SEO wanted to try it through java scripting.

Please let me know if anyone can help on this or direct me to some similar post.

Thanks
Sanny
Dec 12 '08 #1
5 1404
pronerd
392 Expert 256MB
To answer your question yes you can create moving and fading images with JavaScript. The effects will not be as slick as they would with flash but it is workable. For examples of fading Google for examples of JavaScript setting transparency. There are quite a few of them.

To move items just set the CSS positions attribute to absolute and then set the X and Y attributes to move and elements where you want them. You could also Google for examples of this by searching for JavaScript examples of dragging and dropping.
Dec 12 '08 #2
rnd me
427 Expert 256MB
you can use mine in an iframe to embed on your page, or make a link to the galleries url.

i think the script below is self-explanatory as far as what you need to edit.
all you need to do is copy and change the urls inside the one script block from the sample

let me know if you need help, you can get free support from the author here.


everyone:
i worked pretty hard to make it the simplest JavaScript photo gallery out there, and i'd love to get some feedback on it...


a simple page showing a simple embedded, mouse wheel-driven photo gallery:
(you can view a live demo here )
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.     <title>Example Photo Gallery</title>
  4. </head>
  5. <body bgcolor="black" text="white"><center>
  6.  
  7. <h1>My Tornado Photo Gallery</h1>
  8.      <i>(view source to see how simple making a photo gallery can be)</i>
  9. <br /><br />
  10.  
  11. <script type='text/javascript' src="http://danml.com/pub/photoload.js" height="80%" width="66%">
  12.  
  13. http://apod.nasa.gov/apod/image/0506/tornado_nguyen.jpg
  14. http://celebrating200years.noaa.gov/breakthroughs/tornadowarnings/01_tornado_unioncity_650.jpg
  15. http://dw.ohio.gov/ohiostatepatrol/newsroom/iPOD/Van%20Wert%20Tornado.jpg
  16. http://pafc.arh.noaa.gov/classroom/images/sp_tornado1.jpg
  17. http://rst.gsfc.nasa.gov/Sect14/tornado.jpg
  18. http://www.kansas.gov/ksadjutantgeneral/Assets/Pics/tornado.jpg
  19. http://www.spc.noaa.gov/faq/tornado/mayfield.jpg
  20. http://www.srh.noaa.gov/lub/images/events/2007/20070328/tornado_silverton_17_bg.jpg
  21. http://www.srh.noaa.gov/mfl/newpage/08072003/tornado.jpg
  22. http://www.srh.noaa.gov/mfl/newpage/graphics/tornado_generic.jpg
  23. http://www.stpaul.gov/images/pages/N139/Tornado%20LeSueur%202006.jpg
  24. http://www.wrh.noaa.gov/images/hnx/tornado.jpg
  25. http://www.wrh.noaa.gov/images/pqr/TORNADO2.gif
  26.  
  27. </script>    
  28. </center>    
  29. </body>
  30. </html>
  31.  
Dec 13 '08 #3
Hi,

Thank you very much for your replies but not sure if I was very clear in my earlier post as what I need is like a gallery/slideshow of 5 images wherein once the animation reaches the last [5th image] it stops and there is no more looping.
The last image - Worldmap is where I will have ImageMaps [Dreamweaver] for various office locations like London, China, NY, etc. Hope this makes sense.
Let me know if this is possible through Javascripting.

Thanks
SannySmith
Dec 15 '08 #4
acoder
16,027 Expert Mod 8TB
Well, that should be easy. Just modify the code to loop only once, e.g. if the loop sets the loop back to 0, remove that and just have a for loop from 0 to 1 less than the number of images. The exact change would depend on the image gallery code that you're using.
Dec 15 '08 #5
Thanks, I figured a way for this. Am using the bsn crossfader image slideshow script for this.
Dec 15 '08 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

0
by: Perttu Pulkkinen | last post by:
Does anybody know a php-based image gallery, where final looks of the actual site would not be determined by the application? I mean that there would only be a php-library of objects/functions that...
8
by: Chris Dewin | last post by:
Hi. I run a website for my band, and the other guys want an image gallery. I'm thinking it would be nice and easy, if we could just upload a jpg into a dir called "gallery/". When the client...
10
by: ste | last post by:
Hi there, I'm trying to query a MySQL database (containing image data) and to output the results in a HTML table of 3 columns wide (and however many rows it takes) in order to create a basic...
4
by: RE Kochanski | last post by:
I have attempted to use the CSS techniques from two or three sites to create a CSS only image gallery. I am muddling the affair by placing the thumbnails in one float, the page text in another...
1
by: gescom | last post by:
My goal is to create essentially two galleries on a single page, in which the first gallery determines what the second gallery displays. For instance, the first gallery refers to the contents of the...
0
by: numbnutz | last post by:
Hi, I am currently working on an XML Gallery for my girlfriend's brother who is a photographer. I have created a flash front end template and am using an XML database to load the images and...
5
by: dabhand | last post by:
Hi This page http://www.dabhand.co.nz/ayupdev/gallery-riders.html works great in IE but not in Firefox... any help would be appreciated. It refers to an external javascript file which I have...
10
by: cjparis | last post by:
Hello everyone. If anyone can give me a hand I would be gratefull Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE...
25
by: Gilles Ganault | last post by:
Hello I've been googling for a couple of hours, but still haven't found what I need: - really simple PHP-based image gallery software. Ideally, just a single file that I just drop into a...
4
by: saunders1989 | last post by:
Hi, my goal is to create a website with an image gallery. i have about 6 buttons at the bottom of the page whcih when clicked will take you to a different album of photos. i have created the...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.