Image Gallery

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • sannysmith
    New Member
    • May 2008
    • 9
    #1

    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
    Tags: None
    • pronerd
      Recognized Expert Contributor
      • Nov 2006
      • 392
      #2
      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.

        Comment

        • rnd me
          Recognized Expert Contributor
          • Jun 2007
          • 427
          #3
          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 )
          Code:
          <html>
<head>
	<title>Example Photo Gallery</title>
</head>
<body bgcolor="black" text="white"><center>

<h1>My Tornado Photo Gallery</h1>
	 <i>(view source to see how simple making a photo gallery can be)</i>
<br /><br />

<script type='text/javascript' src="http://danml.com/pub/photoload.js" height="80%" width="66%">

http://apod.nasa.gov/apod/image/0506/tornado_nguyen.jpg
http://celebrating200years.noaa.gov/breakthroughs/tornadowarnings/01_tornado_unioncity_650.jpg
http://dw.ohio.gov/ohiostatepatrol/newsroom/iPOD/Van%20Wert%20Tornado.jpg
http://pafc.arh.noaa.gov/classroom/images/sp_tornado1.jpg
http://rst.gsfc.nasa.gov/Sect14/tornado.jpg
http://www.kansas.gov/ksadjutantgeneral/Assets/Pics/tornado.jpg
http://www.spc.noaa.gov/faq/tornado/mayfield.jpg
http://www.srh.noaa.gov/lub/images/events/2007/20070328/tornado_silverton_17_bg.jpg
http://www.srh.noaa.gov/mfl/newpage/08072003/tornado.jpg
http://www.srh.noaa.gov/mfl/newpage/graphics/tornado_generic.jpg
http://www.stpaul.gov/images/pages/N139/Tornado%20LeSueur%202006.jpg
http://www.wrh.noaa.gov/images/hnx/tornado.jpg
http://www.wrh.noaa.gov/images/pqr/TORNADO2.gif

</script>	
</center>	
</body>
</html>

            Comment

            • sannysmith
              New Member
              • May 2008
              • 9
              #4
              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

                Comment

                • acoder
                  Recognized Expert MVP
                  • Nov 2006
                  • 16032
                  #5
                  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.

                    Comment

                    • sannysmith
                      New Member
                      • May 2008
                      • 9
                      #6
                      Thanks, I figured a way for this. Am using the bsn crossfader image slideshow script for this.

                        Comment

                        Previous template Next
                        Working...