сейчас на сайте:
Лучшие сказки мира
Детектив и фантастика
Песни прошлых лет
Для досуга
смотреть оглавлениепримерразмер кода
All the thumbnails are dynamically generated.The initial display of thumbnails show the number of galleries depicted by the first thumbnail from that gallery.On selecting an image the current thumbnails are replaced with the thumbnails for the selected gallery.While in a gallery if a thumbnail is selected its larger version is displayed.To return to the gallery selection click the View Galleries link
The display box for the text is dynamically created whenever there is text to be shown.
The border around the image can be changed with variable displayBorderWidth this border is also be applied to the text box when generated. The border colour is set at variable displayBorderColor.
You can create a default css style rule to apply to all the text displays, this style rule must be called defaultstyle
Example:
.defaultstyle{color:#008000;background-color:#ddeedd;border:2px solid #bbccbb;}
To set up a gallery you need to enter your images and any accompanying text into the array
If you are only showing an image the relevant index requires 2 entries
["thumb.jpg","bigpic.jpg"]
If you are showing an image and text the relevant index requires 3 entries
["thumb.jpg","bigpic.jpg","Image text"]
You can also create additional style rules and apply them to one or more text displays, overriding the default style rule.With the exception of the default style your custom style rule names can be any of your choosing.
If you are going to apply a custom style rule the relevant index requires 4 entries
["thumb.jpg","bigpic.jpg","Image text","yourstylerulename"]
The overall width of the display is determined by the width of the current image, the height is determined by the height of the current image plus any text that is shown.The size that the larger image is shown at can be adjusted with variable imageSize this is a percent value set at 100 by default.The value of imageSize will be applied to all the larger images widths and heights
With variable centerImage set to 1 the display is initially shown in the center of the window, if required you can use the variables offsetX and offsetY to offset the final position of the display.To manually position the display change the variable centerImage to zero and use the left and top positions within the imgholder div
<HTML><HEAD><TITLE>Image Gallery 4</TITLE><script type="text/javascript">// ["thumb","bigpic","alt text"]gallery0=[['pic01_tn.jpg','pic01.jpg''Alt Text','Each galleries thumbnails are dynamically generated'],['pic02_tn.jpg','pic02.jpg''Alt Text','This text box is also dynamically created to show any text that goes with the image'],['pic03_tn.jpg','pic03.jpg''Alt Text','A default style can be set for this text box and its contents'],['pic04_tn.jpg','pic04.jpg''Alt Text','You can also over-ride the default style and create individual text box styles','textstyle2'],['pic05_tn.jpg','pic05.jpg''Alt Text','The larger image is shown in a centered div'],['pic06_tn.jpg','pic06.jpg''Alt Text','You can show the larger images in a different size to its default size','textstyle3'],['pic07_tn.jpg','pic07.jpg''Alt Text','You can show just an image, see next image'],['pic08_tn.jpg','pic08.jpg','Alt Text'],['pic09_tn.jpg','pic09.jpg''Alt Text','The thumbnails, the larger image, the text, and your style type are all coded into an array'],['pic10_tn.jpg','pic10.jpg','Image 10','Alt Text'],['pic11_tn.jpg','pic11.jpg','Image 11','Alt Text'],['pic12_tn.jpg','pic12.jpg','Image 12','Alt Text']]gallery1=[['gallery1thumb1.jpg','gallery1bigpic1.jpg','Alt Text'],['gallery1thumb2.jpg','gallery1bigpic2.jpg','Alt Text'],['gallery1thumb3.jpg','gallery1bigpic3.jpg','Alt Text'],['gallery1thumb4.jpg','gallery1bigpic4.jpg','Alt Text']]gallery2=[['gallery2thumb1.jpg','gallery2bigpic1.jpg','Alt Text'],['gallery2thumb2.jpg','gallery2bigpic2.jpg','Alt Text'],['gallery2thumb3.jpg','gallery2bigpic3.jpg','Alt Text'],['gallery2thumb4.jpg','gallery2bigpic4.jpg','Alt Text']]gallery3=[['gallery3thumb1.jpg','gallery3bigpic1.jpg','Alt Text'],['gallery3thumb2.jpg','gallery3bigpic2.jpg','Alt Text'],['gallery3thumb3.jpg','gallery3bigpic3.jpg','Alt Text'],['gallery3thumb4.jpg','gallery3bigpic4.jpg','Alt Text']]galleryListRows=3 // gallery listgalleryRows=3 // galleriescenterImage=1 // 0 = no, 1 = yesimageSize=100 // % size the large image is shown atdisplayBorderWidth=8displayBorderColor="#FFFFFF"offsetX=0offsetY=0function showGalleryList(n){ // create list of galleries by showing the first thumbnail in each gallerythumbHolder=document.getElementById("thumbholder")thumbHolder.innerHTML=""count=0while(window["gallery"+count]){newImage=document.createElement("IMG")newImage.setAttribute("id","thumb"+count)newImage.setAttribute("src",window["gallery"+count][0][0])newImage.setAttribute("alt","View Gallery "+(count+1))newImage.setAttribute("title","View Gallery "+(count+1))newImage.setAttribute((document.getElementById&&!document.all?"class":"className"),"borderout")newImage.style.width="45px"newImage.style.height="60px"newImage.style.marginRight="5px"newImage.style.marginBottom="5px"newImage.indexNum=countnewImage.onclick=function(){showSelectedGallery(this.indexNum)}newImage.onmouseover=function(){this.className='borderover'}newImage.onmouseout=function(){this.className='borderout'}if(count!=0&&count%galleryListRows==0){newBreak=document.createElement("BR")document.getElementById("thumbholder").appendChild(newBreak)}document.getElementById("thumbholder").appendChild(newImage)count++}document.getElementById("header").innerHTML="Galleries"document.getElementById("viewgalleries").innerHTML=" "}function showSelectedGallery(n){ // create selected gallery thumbnailsdocument.getElementById("header").innerHTML="Gallery "+(n+1)document.getElementById("viewgalleries").innerHTML="Back To Galleries"thumbHolder=document.getElementById("thumbholder")thumbHolder.innerHTML=""count=0while(window["gallery"+n][count]){newImage=document.createElement("IMG")newImage.setAttribute("id","thumb"+count)newImage.setAttribute("src",window["gallery"+n][count][0])newImage.setAttribute((document.getElementById&&!document.all?"class":"className"),"borderout")newImage.style.width="45px"newImage.style.height="60px"newImage.style.marginRight="5px"newImage.style.marginBottom="5px"newImage.indexNum=countnewImage.onclick=function(){showPic(n,this.indexNum)}newImage.onmouseover=function(){this.className='borderover'}newImage.onmouseout=function(){this.className='borderout'}if(count!=0&&count%galleryRows==0){newBreak=document.createElement("BR")document.getElementById("thumbholder").appendChild(newBreak)}document.getElementById("thumbholder").appendChild(newImage)count++}preload=new Array()for(var i=0;i<window["gallery"+n].length;i++){preload[i]=new Image()preload[i].src=window["gallery"+n][i][1]}}function showPic(arrNum,indexNum){ // display larger image and textdisplayEl=document.getElementById("imgholder")displayPic=document.getElementById("mypic")displayPic.onclick=function(){displayEl.style.display="none"}imageWidth=preload[indexNum].width/100*imageSizeimageHeight=preload[indexNum].height/100*imageSizeif(document.getElementById("displaytext")){displayEl.removeChild(displayText)}displayEl.style.backgroundColor=displayBorderColordisplayEl.style.width=(displayBorderWidth==0?imageWidth:imageWidth+(displayBorderWidth*2))+"px"displayEl.style.height=(displayBorderWidth==0?imageHeight:imageHeight+(displayBorderWidth*2))+"px"displayEl.style.display="block"displayPic.src=preload[indexNum].srcdisplayPic.style.width=imageWidth+"px"displayPic.style.height=imageHeight+"px"displayPic.style.margin=displayBorderWidth+"px"displayPic.alt=window["gallery"+arrNum][indexNum][2] // show alt textif(window["gallery"+arrNum][indexNum][3]){ // create text box if requireddisplayEl.style.height=""displayText=document.createElement("DIV")displayText.setAttribute("id","displaytext")with(displayText.style){marginLeft=displayBorderWidth+"px"marginRight=displayBorderWidth+"px"marginBottom=displayBorderWidth+"px"}displayText.innerHTML=window["gallery"+arrNum][indexNum][3]displayEl.appendChild(displayText)if(window["gallery"+arrNum][indexNum][4]){document.getElementById("displaytext").className=window["gallery"+arrNum][indexNum][4] // apply style}else{document.getElementById("displaytext").className="defaultstyle"}}centerLeft=(document.body.clientWidth/2) - (displayEl.offsetWidth/2) + offsetXcenterTop=(document.body.clientHeight/2)-(displayEl.offsetHeight/2) + document.body.scrollTop + offsetYif(centerImage==1){displayEl.style.left=centerLeft+"px"displayEl.style.top=centerTop+"px"}}</script><style>.defaultstyle{color:#008000;background-color:#ddeedd;border:2px solid #bbccbb;}.textstyle2{color:#808000;background-color:#eeeedd;border:2px solid #ccccbb;}.textstyle3{color:#800000;background-color:#eedddd;border:2px solid #ccbbbb;}.textstyle4{color:#000000;background:#ddddee;border:1px solid #bbbbcc;}.borderout{border:1px outset white}.borderover{border:1px inset white;cursor:hand;cursor:pointer}</style></HEAD><BODY onload="showGalleryList(0)"><h1><span>Image Gallery 4</span></h1><div style="width:200px;border:2px solid #647369;background-color:#a6b0a6"><div id="header" style="font-size:30px;text-align:center">Galleries</div><div id="viewgalleries" style="text-align:center;;cursor:hand;cursor:pointer" onclick="showGalleryList(0)">View Galleries</div><div id="thumbholder" style="height:300px;text-align:center;overflow:auto;padding-top:5px;border-top:2px solid #647369"></div></div><div id="imgholder" style="position:absolute;left:0px;top:0px;display:none" title="Click to close"><img name="mypic" id="mypic" src="blank.gif" style="position:relative"></div> <P>All the thumbnails are dynamically generated.<br>The initial display of thumbnails show the number of galleries depicted by the first thumbnail from that gallery.<br>On selecting an image the current thumbnails are replaced with the thumbnails for the selected gallery.<br>While in a gallery if a thumbnail is selected its larger version is displayed.<br>To return to the gallery selection click the View Galleries link</P></BODY></HTML>