このエントリーをはてなブックマークに追加

横移動スライドギャラリー/Photo Gallery #06

このサンプルは、イメージを横にスライド移動させながら切り替えます。
プレゼンテーション用のイメージをスライドとして表示するときに利用すると便利かもしれません。
イメージは左から右にスライド移動します。
それぞれのイメージにリンクを設定することも可能です。

スポンサーリンク

【DEMO】

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
    |
    +-- js / slideshow06.js
    |
    +-- images /0.jpg
              1.jpg
              2.jpg
              3.jpg
              4.jpg
              5.jpg

【code】

編集・カスタマイズ等はエディタで開き修正をしてください。

【html】

HTMLファイルの<body></body>の間に下記のコード<script type="text/javascript" src="js/slideshow06.js"></script>を入力するだけです。

  • <script type="text/javascript" src="js/slideshow06.js"></script>

【javascript】

1)使用する画像写真の横幅、2)使用する画像写真の縦幅、3)スライドする間隔、4)使用する写真画像順序とファイル名のセット、5)写真画像をリンクさせる場合#にリンク先のURLをセットする

  • var slideshow_width='600px' //1)SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)
  • var slideshow_height='450px' //2)SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)
  • var pause=3000 //3)SET PAUSE BETWEEN SLIDE (2000=2 seconds)
  • var slidebgcolor="white"
  • var dropimages=new Array()
  • //4)SET IMAGE PATHS. Extend or contract array as needed
  • dropimages[0]="images/0.jpg"
  • dropimages[1]="images/1.jpg"
  • dropimages[2]="images/2.jpg"
  • dropimages[3]="images/3.jpg"
  • dropimages[4]="images/4.jpg"
  • dropimages[5]="images/5.jpg"
  • var droplinks=new Array()
  • //5)SET IMAGE URLs. Use "" if you wish particular image to NOT be linked:
  • droplinks[0]="#"
  • droplinks[1]="#"
  • droplinks[2]="#"
  • droplinks[3]="#"
  • droplinks[4]="#"
  • droplinks[5]="#"
  • ////NO need to edit beyond here/////////////
  • var preloadedimages=new Array()
  • for (p=0;p<dropimages.length;p++){
  • preloadedimages[p]=new Image()
  • preloadedimages[p].src=dropimages[p]
  • }
  • var ie4=document.all
  • var dom=document.getElementById
  • if (ie4||dom)
  • document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>')
  • else
  • document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')
  • var curpos=parseInt(slideshow_width)*(-1)
  • var degree=10
  • var curcanvas="canvas0"
  • var curimageindex=linkindex=0
  • var nextimageindex=1
  • function movepic(){
  • if (curpos<0){
  • curpos=Math.min(curpos+degree,0)
  • tempobj.style.left=curpos+"px"
  • }
  • else{
  • clearInterval(dropslide)
  • nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
  • tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
  • var slideimage='<img src="'+dropimages[curimageindex]+'" border=0>'
  • tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage
  • nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
  • setTimeout("rotateimage()",pause)
  • }
  • }
  • function rotateimage(){
  • if (ie4||dom){
  • resetit(curcanvas)
  • var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
  • crossobj.style.zIndex++
  • var temp='setInterval("movepic()",20)'
  • dropslide=eval(temp)
  • curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
  • }
  • else
  • document.images.defaultslide.src=dropimages[curimageindex]
  • linkindex=curimageindex
  • curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
  • }
  • function rotatelink(){
  • if (droplinks[linkindex]!="")
  • window.location=droplinks[linkindex]
  • }
  • function resetit(what){
  • curpos=parseInt(slideshow_width)*(-1)
  • var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
  • crossobj.style.left=curpos+"px"
  • }
  • function startit(){
  • var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
  • crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'
  • rotateimage()
  • }
  • if (ie4||dom)
  • window.onload=startit
  • else
  • setInterval("rotateimage()",pause)

【images】

デモで使用しているサンプル画像です。

【Sample Code】

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  • <meta http-equiv="Content-Script-Type" content="text/javascript" />
  • <title>フォト ギャラリー サンプル #06</title>
  • </head>
  • <body>
  • <script type="text/javascript" src="js/slideshow06.js"></script>
  • </body>
  • </html>