|
JavaScript - Js Slideshow/gallery Help
Similar TutorialsPlz i want to make a photo gallery of many images... i want it to be enlarged with an effect.. i have a thumbnails images and large images i want the thumbnails to be enlarged with any effect and to be displayed on the same page .. can anyone send for me a new photo gallery effect? Does anyone have a solution? The first image works fine, but obviously when the image is changed by the second function it will not work???? Code: <script type="text/javascript">
jQuery(document).ready(function(){
$("a#single_image").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
</head>
<body>
<div class="hidden">
<script type="text/javascript">
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
var large = $(this).attr("title");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<a href="' + large + '" id="single_image"><img src="' + image + '"/></a>');
return false;
});
});
</script>
Hi I want to create an image gallery which has one main image (large size) with a series of smaller thumbnail images below. When you click on one of the smaller images below, I need it to load it into the space above. This series of images will be selected by a PHP script and a MySQL database. The ratios of the images will not always be the same, so the boundry box will need to change width and height accordingly. This will change the height of the page too I guess. Now, the real fly in the ointment is that I really would like the main image to have a drop shadow (gradient based) on all 4 sides of the image. So, good people of the JS Sub-Forum - whats the best way to get this done?! Cheers The Moose Hi guys. I wanted to show you a gallery that I am doing. I'm stuck here with some issue. I've made the gallery with the buttons but now I wanted to add a previous and next button but I not being able to do. all the rest is working. the javascript code is this: Code: $(function () {
var imgContainers = $('div.tabs > div');
imgContainers.hide().filter(':first').show();
$('div.tabs ul.number_nav a').click(function () {
imgContainers.hide();
imgContainers.filter(this.hash).show();
$('div.tabs ul.number_nav a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
the html file is this: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>gallery</title> <!--CSS--> <link href="style.css" rel="stylesheet" type="text/css" /> <!--JavaScript--> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="code.js"></script> </head> <body> <div id="gallery"><!--IMG CONTAINER START --> <div class="tabs"> <div id="image_01"> <div class="image"> <img src="image_one.png" width="795" height="395" /> </div> </div> <div id="image_02" > <div class="image"> <img src="image_two.png" width="795" height="395" /> </div> </div> <div id="image_03"> <div class="image"> <img src="and_so_on.png" width="795" height="395" /> </div> </div> <ul class="number_nav"> <li><a href="#image_01">01</a></li> <li><a href="#image_02">02</a></li> <li><a href="#image_03">03</a></li> </ul> <ul class="prev_next_nav"> <li><a href="#">Previous</a></li> / <li><a href="#">Next</a></li> </ul> </div> </div> </body> </html> here is the zip file: http://www.sendspace.com/file/we3lkd can someone help me to make the code to the previous / next code please? I'm not very good ( nothing at all ) with javascript... Dear Friends, I have a javascript image gallery in my website.. it is working Good.. But now i have some problem... i have to get the Loaded image url. i need users to post comments about that image. So i have to get the URL or name of image. This is needed in a text input field... So please see the code of gallery and help me.. The code is below.. Or Check it here http://www.home-palettes.com/gallery.html Code: //add thickbox to href elements that have a class of .thickbox
function TB_init(){
$("a.thickbox").click(function(){
var t = this.title || this.name || null;
var g = this.rel || false;
TB_show(t,this.href,g);
this.blur();
return false;
});
$("a.thickbox").css({display:"inline"});
}
function TB_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
var images_location = 'extensions/thickbox_2'
try {
if (document.getElementById("TB_HideSelect") == null) {
$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(TB_remove);
}
if(caption==null){caption=""};
$(window).scroll(TB_position);
TB_overlaySize();
$("body").append("<div id='TB_load'><img src='"+images_location+"/loadingAnimation.gif' /></div>");
TB_load_position();
if(url.indexOf("?")!==-1){ //If there is a query string involved
var baseURL = url.substr(0, url.indexOf("?"));
}else{
var baseURL = url;
}
var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.bmp/g;
var urlType = baseURL.toLowerCase().match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
TB_PrevCaption = "";
TB_PrevURL = "";
TB_PrevHTML = "";
TB_NextCaption = "";
TB_NextURL = "";
TB_NextHTML = "";
TB_imageCount = "";
TB_FoundURL = false;
if(imageGroup){
TB_TempArray = $("a[@rel="+imageGroup+"]").get();
for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML == "")); TB_Counter++) {
var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
if (!(TB_TempArray[TB_Counter].href == url)) {
if (TB_FoundURL) {
TB_NextCaption = TB_TempArray[TB_Counter].title;
TB_NextURL = TB_TempArray[TB_Counter].href;
TB_NextHTML = "<span id='TB_next'> <a href='#'>Next ></a></span>";
} else {
TB_PrevCaption = TB_TempArray[TB_Counter].title;
TB_PrevURL = TB_TempArray[TB_Counter].href;
TB_PrevHTML = "<span id='TB_prev'> <a href='#'>< Prev</a></span>";
}
} else {
TB_FoundURL = true;
TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);
}
}
}
imgPreloader = new Image();
imgPreloader.onload = function(){
imgPreloader.onload = null;
// Resizing large images - orginal by Christian Montoya edited by me.
var pagesize = TB_getPageSize();
var x = pagesize[0] - 150;
var y = pagesize[1] - 150;
var imageWidth = imgPreloader.width;
var imageHeight = imgPreloader.height;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}
// End Resizing
TB_WIDTH = imageWidth + 30;
TB_HEIGHT = imageHeight + 60;
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div>");
$("#TB_closeWindowButton").click(TB_remove);
if (!(TB_PrevHTML == "")) {
function goPrev(){
if($(document).unclick(goPrev)){$(document).unclick(goPrev)};
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
TB_show(TB_PrevCaption, TB_PrevURL, imageGroup);
return false;
}
$("#TB_prev").click(goPrev);
}
if (!(TB_NextHTML == "")) {
function goNext(){
$("#TB_window").remove();
$("body").append("<div id='TB_window'></div>");
TB_show(TB_NextCaption, TB_NextURL, imageGroup);
return false;
}
$("#TB_next").click(goNext);
}
/*
document.onkeydown = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
TB_remove();
} else if(keycode == 190){ // display previous image
if(!(TB_NextHTML == "")){
document.onkeydown = "";
goNext();
}
} else if(keycode == 188){ // display next image
if(!(TB_PrevHTML == "")){
document.onkeydown = "";
goPrev();
}
}
} */
TB_position();
$("#TB_load").remove();
$("#TB_ImageOff").click(TB_remove);
$("#TB_window").css({display:"block"}); //for safari using css instead of show
}
imgPreloader.src = url;
}else{//code to show html pages
var queryString = url.replace(/^[^\?]+\??/,'');
var params = TB_parseQuery( queryString );
TB_WIDTH = (params['width']*1) + 30;
TB_HEIGHT = (params['height']*1) + 40;
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;
if(url.indexOf('TB_iframe') != -1){
urlNoQuery = url.split('TB_');
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a></div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' onload='TB_showIframe()'> </iframe>");
}else{
$("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a></div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
}
$("#TB_closeWindowButton").click(TB_remove);
if(url.indexOf('TB_inline') != -1){
$("#TB_ajaxContent").html($('#' + params['inlineId']).html());
TB_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}else if(url.indexOf('TB_iframe') != -1){
TB_position();
if(frames['TB_iframeContent'] == undefined){//be nice to safari
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
$(document).keyup( function(e){ var key = e.keyCode; if(key == 27){TB_remove()} });
}
}else{
$("#TB_ajaxContent").load(url, function(){
TB_position();
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
});
}
}
$(window).resize(TB_position);
document.onkeyup = function(e){
if (e == null) { // ie
keycode = event.keyCode;
} else { // mozilla
keycode = e.which;
}
if(keycode == 27){ // close
TB_remove();
}
}
} catch(e) {
alert( e );
}
}
//helper functions below
function TB_showIframe(){
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
}
function TB_remove() {
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').remove();});
$("#TB_load").remove();
return false;
}
function TB_position() {
var pagesize = TB_getPageSize();
var arrayPageScroll = TB_getPageScrollTop();
$("#TB_window").css({width:TB_WIDTH+"px",left: (arrayPageScroll[0] + (pagesize[0] - TB_WIDTH)/2)+"px", top: (arrayPageScroll[1] + (pagesize[1]-TB_HEIGHT)/2)+"px" });
}
function TB_overlaySize(){
if (window.innerHeight && window.scrollMaxY || window.innerWidth && window.scrollMaxX) {
yScroll = window.innerHeight + window.scrollMaxY;
xScroll = window.innerWidth + window.scrollMaxX;
var deff = document.documentElement;
var wff = (deff&&deff.clientWidth) || document.body.clientWidth || window.innerWidth || self.innerWidth;
var hff = (deff&&deff.clientHeight) || document.body.clientHeight || window.innerHeight || self.innerHeight;
xScroll -= (window.innerWidth - wff);
yScroll -= (window.innerHeight - hff);
} else if (document.body.scrollHeight > document.body.offsetHeight || document.body.scrollWidth > document.body.offsetWidth){ // all but Explorer Mac
yScroll = document.body.scrollHeight;
xScroll = document.body.scrollWidth;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
yScroll = document.body.offsetHeight;
xScroll = document.body.offsetWidth;
}
$("#TB_overlay").css({"height":yScroll +"px", "width":xScroll +"px"});
$("#TB_HideSelect").css({"height":yScroll +"px","width":xScroll +"px"});
}
function TB_load_position() {
var pagesize = TB_getPageSize();
var arrayPageScroll = TB_getPageScrollTop();
$("#TB_load")
.css({left: (arrayPageScroll[0] + (pagesize[0] - 100)/2)+"px", top: (arrayPageScroll[1] + ((pagesize[1]-100)/2))+"px" })
.css({display:"block"});
}
function TB_parseQuery ( query ) {
var Params = new Object ();
if ( ! query ) return Params; // return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
function TB_getPageScrollTop(){
var yScrolltop;
var xScrollleft;
if (self.pageYOffset || self.pageXOffset) {
yScrolltop = self.pageYOffset;
xScrollleft = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft ){ // Explorer 6 Strict
yScrolltop = document.documentElement.scrollTop;
xScrollleft = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScrolltop = document.body.scrollTop;
xScrollleft = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScrollleft,yScrolltop)
return arrayPageScroll;
}
function TB_getPageSize(){
var de = document.documentElement;
var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight
arrayPageSize = new Array(w,h)
return arrayPageSize;
}
Hey all, I'm designing a website and i'm doing a section on a portfolio of artwork. wat i would like is to group the work under different headings and for each group to have a thumbnail of an image. when that image is clicked a window is opened which displays all the works in that group as thumbnails as well as an image gallery (larger image of the current image and being able to click on the other thumbnails to view a larger image of it). hope that makes sense. I've been searching all over for scripts bit nothing fits my criteria exactly. going a bit crazy over this, any help or direction much appreciated. peace I've tried hosting my WIP website to see how it works. Everything goes well except for the following: On my Portfolio page: [Portfolio] I have coded a "gallery" in jquery. When the page starts loading it seems that the browser loads the ` Code: #portfolioSlider ` div which is supposed to be display:none until triggered. It contains lots of images resulting in massive load time until the thumbnails ( `#Portfolio` ) starts loading. How can I make the ` Code: #portfolioSlider ` images start loading only after it opens? Thanks in advance! Hey all, Effectively what I want is a table displaying 20 thumbnails and above the table to be a large image. When a user clicks a thumbnail I want a relative image to be displayed above. Now obviously I can just set this to reload the page and load the relative image in its space but I was wondering if there was a way of doing this without having to reload the whole page each time. I also want to avoid Iframes as I want this to be as cross-compatible as possible. Thanks all. Does anyone know of a good webscript slideshow on a loop that I can use in a website ? www.chagfordshow.com We don’t want a database at the moment. Needs to work in all browsers. What I’m looking for :- Change the image every few seconds. Slip into any element of the webpage. All images will be the same size. Some landscape, some portrait. Looking for this to work all in client’s scripting. or maybe AJAX Thanks. Most grateful if anyone can help Hello, Any suggestions for how to make this sort of gallery - http://www.timsimmons.co.uk/index.php ? I am making a website for a friends degree show and really like the minimal aesthetic. I'm not a fan of the usual JS plugin galleries. One thing I can't work out how they have done is link the text caption above to the images. This has been niggling at me for days! I am new to JS so please go easy on me. Cheers, Andy Hey im looking to get 3 slide shows on 1 website (coded in php). I need the slide shows to all show different images however all change images at the exact same time and have the exact same layout... how can i do this? Hello everybody! first of all I must specify that I don't know almost anything about javascript... I'm trying to introduce a javascript slideshow (I found a free one) on our website and I have a problem: As you can see here on the bottom of the page (http://www.comelity.com/en/pages/about-us.php), when the slideshow changes image, it puts a link over the image without any reason and if you click on the image it reloads the page... I would like to remove this link, but I'm not able... Does anyone know how to solve the problem? I can send the javascript slideshow if you want... Thank you very much! S.P. hi evey one I need a slideshow like this website . zbiddy.com as you can see , in the top of the page is a slide show . I just need a slideshow that change the content of each slide . I've made my content for each slide and just need a script that change these content I need your help very much Thanks I worked a lot with a friend to change the code, and it's almost there. The next and last buttons still work. The Start buttons is titled 'wri' and the latest button is titled 'end'. The end button does not work. Before I added the end button, the start button worked, but now it sends you to the image alt. Any ideas on what went wrong? Code: window.onload = initLinks;
var myPix = new Array("comic/Issue1_Page00.gif","comic/Issue1_Page01.gif","comic/Issue1_Page02.gif");
var thisPic = 0;
function initLinks() {
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}
function processPrevious() {
if (thisPic == 0) {
thisPic = myPix.length;
}
thisPic--;
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}
function processNext() {
thisPic++;
if (thisPic == myPix.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}
// Load Images
if (document.images) {
writeImg = new Image();
writeImg.src = (comic/Issue1_Page03.gif);
}
function imgOn(imgName) {
if (imgName == 'end') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}
return false;
}
// Load Images
if (document.images) {
writeImg = new Image();
writeImg.src = (comic/Issue1_Page00.gif);
}
function imgOn(imgName) {
if (imgName == 'wri') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}
return false;
}
Hi, I desperately need a javascript slideshow that does the following: 1--shows still images with thumbnails 2--can be played manually or automatically 3--can embed youtube videos 4--audio can accompany slideshows 5--powered by javascript, not Flash so it shows up on iPad Does anyone know where I can get such a slideshow? Thanks I am having a problem with my homework assignment and can not figure out the problem. Debug comes back clean and I am stumped on this project for several hours. I hate asking for help and like to figure it out on my own, but I can not seem to know what the problem is. I have done alerts in my blocks of code and everything is coming back. Here is the book and the case problem I am on: http://books.google.com/books?id=BeE...page&q&f=false Basically the images is not loading up, or anything is happening. //EDIT : I have the function setup() onLoad in the body ( body onload="setup()" ) Here is my code: FileName: flibrary.js Code: function getStyle(object, styleName) {
if (window.getComputedStyle) {
return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
} else if (object.currentStyle) {
return object.currentStyle[styleName]
}
}
// step 3
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
//step 4
function addEvent(object, evName, fnName, cap) {
if (object.detachEvent)
object.detachEvent("on" + evName, fnName);
else if (object.removeEventListener)
object.removeEventListener(evName, fnName, cap);
}
FileName: slideshows.js Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 6
Case Problem 2
Author:
Date:
Filename: slideshow.js
Global Variables:
scrollButton
References the scrolling button in the slide show
diffX
Stores the horizontal distance in pixels between the
mouse pointer when the scrolling button is clicked
and the left edge of the scrolling button.
Functions List:
setup()
Initializes the contents of the Web page. Creates
event handlers for the mouse and keyboard events
grabIt(e)
"Grabs" the scrolling button to set up the
horizontal scrolling of the slide show
moveIt(e)
Moves the scrolling button horizontally through
the scrollbar
showSlide(x)
Shows the image corresponding the to the x coordinate
on the scrollbar
dropIt(e)
Drops the scrolling button after the user releases the
mouse button
keyShow(e)
Uses the left and right arrow keys to move the scrolling
button through the scrollbar
*/
var scrollButton;
var diffX;
// step 7
function setup(){
scrollButton = document.getElementById("button");
scrollButton.style.top = getStyle(scrollButton,"top");
scrollButton.style.left = getStyle(scrollButton,"left");
scrollButton.style.cursor = "pointer";
addEvent(scrollButton, "mousedown", grabIt, false);
addEvent(document, "keydown", keyShow, false);
}
// step 8
function grabIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
diffX = parseInt(scrollButton.style.left)- mouseX;
addEvent(scrollButton, "mousemove", moveIt, false);
addEvent(scrollButton, "mouseup", dropIt, false);
}
// step 9
function moveIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
var buttonPosX = mouseX - diffX;
showSlide();
}
// step 10
function showSlide(x){
if(x<20){
x = 20;
}
if(x>299){
x = 299;
}
scrollButton.style.left = x;
var i = Math.floor((x-20)/31);
document.getElementById("photo").src = image[i];
}
// step 11
function dropIt(e){
removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
var evt = e || window.event;
var key = event.keyCode;
var buttonPosX = scrollButton.style.left;
if(key == 37) buttonPosX -= 31;
if(key == 39) buttonPosX += 31;
showSlide(buttonPosX);
}
Code: var mySlideShow = document.getElementById("slideShow");
var imageArray=new Array();
imageArray[0]="url(images/Slide1.JPG)";
imageArray[1]="url(images/Slide2.JPG)";
imageArray[2]="url(images/Slide3.JPG)";
var imageIndex = 0;
var leftArrow = document.getElementById("left");
var rightArrow = document.getElementById("right");
mySlideShow.style.backgroundImage = "url(images/Slide1.JPG";
function changeRight () {
mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 1;
}
console.log(imageIndex);
}
function changeLeft () {
mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex--;
console.log(imageIndex);
}
rightArrow.onclick = function() {
changeRight();
}
leftArrow.onclick = function() {
changeLeft();
}
So what I am trying to do here is basically a slideshow. When I click on the left button it goes backwards and when I click the right button it goes forward. The problem arises when I click on the left arrow. It doesn't act as I want it to and I need some help. I want to remove one from the image index but imageindex--; doesn't seem to work. Any help would be awesome. Solved
This slideshow has a drop down menu that lets you go from one picture to another. Can someone help me modify it so that instead of a dropdown menu i have a list of numbers (horizontally,not vertically)? I know absolutley nothing about javascript. sorry. Thanks programmers! <!-- configurable script --> <script type="text/javascript"> theimage = new Array(); theimage[0]=["url", "", "1"]; theimage[1]=["url", "", "2"]; theimage[2]=["url", "", "3"]; //########################################### window.onload=function(){ //preload images into browser preloadSlide(); //"jump to" box for (y=0;y<theimage.length;y++) { document.slideshow.imgComboBox[y]=new Option(theimage[y][2]); } //set the first slide SetSlide(0); } //########################################### function SetSlide(num) { //too big i=num%theimage.length; //too small if(i<0)i=theimage.length-1; //switch the image document.images.imgslide.src=theimage[i][0]; //if drop down box if(document.slideshow.imgComboBox){ document.slideshow.imgComboBox.selectedIndex = i; } //if they want name of current slide document.getElementById('slidebox').innerHTML=theimage[i][2]; } //########################################### function PlaySlide() { if (!window.playing) { PlayingSlide(i+1); if(document.slideshow.play){ document.slideshow.play.value=" Stop "; } } else { playing=clearTimeout(playing); if(document.slideshow.play){ document.slideshow.play.value=" Play "; } } // if you have to change the image for the "playing" slide if(document.images.imgPlay){ setTimeout('document.images.imgPlay.src="'+imgStop+'"',1); imgStop=document.images.imgPlay.src } } //########################################### function PlayingSlide(num) { playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed); } //########################################### function preloadSlide() { for(k=0;k<theimage.length;k++) { theimage[k][0]=new Image().src=theimage[k][0]; } } </script> <!-- slide show HTML --> <form name="slideshow"> <table border="1" cellpadding="2" cellspacing="0"> <tr> <td align="center"> <a href="#" onmouseover="this.href=theimage[i][1];return false"> <script type="text/javascript"> document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">') </script> </a> </td> </tr> <tr> <td align="center"><div id="slidebox"></div></td> </tr> <tr> <td align="center"> <select name="imgComboBox" onchange="SetSlide(document.slideshow.imgComboBox.selectedIndex);"></select> </td> </tr> </table> </form> <!-- end of slide show HTML --> Hello. I was wondering where I can find something like this: It's a slideshow. I need one for my site. Thank you. |
|||||||