|
JavaScript - Pause Scrolling Images On Click
Hi everyone! I'm using a jquery image sliding plugin from this site: http://flexidev.co.za/projects/flexislider/ It scrolls smoothly and continuously which is great. But I'm wanting to add a "click to pause" feature to it, so when you click any of the images the whole thing pauses, and when you click again it restarts. I'm not great with javascript though and I can't figure out how to do that, if it's even possible.
I'd really appreciate any pointers or tips! Here is the javascript: Code: var speed = 50;
var pic, numImgs, arrLeft, i, totalWidth, n, myInterval;
$(window).load(function(){
pic = $("#slider").children("img");
numImgs = pic.length;
arrLeft = new Array(numImgs);
for (i=0;i<numImgs;i++){
totalWidth=0;
for(n=0;n<i;n++){
totalWidth += $(pic[n]).width();
}
arrLeft[i] = totalWidth;
$(pic[i]).css("left",totalWidth);
}
myInterval = setInterval("flexiScroll()",speed);
$('#imageloader').hide();
$(pic).show();
});
function flexiScroll(){
for (i=0;i<numImgs;i++){
arrLeft[i] -= 1;
if (arrLeft[i] == -($(pic[i]).width())){
totalWidth = 0;
for (n=0;n<numImgs;n++){
if (n!=i){
totalWidth += $(pic[n]).width();
}
}
arrLeft[i] = totalWidth;
}
$(pic[i]).css("left",arrLeft[i]);
}
}
Similar TutorialsI want to add a automatic scrolling images box (thumbnail size) to my website, but stops when someone places their mouse on it. I have uploaded a folder to my server with all the thumb size images in it. Would it be possible to get it so it random picks pictures from the folder? I already have a scrolling images box on my website http://173.83.99.254/index.php which just places models/photographers in the box. But I need another that picks photos from a specified folder. Thanks
Hi, I am looking for some help with adding a caption in a semi transparent box over the main scrolling image in this http://jdhost.ueuo.com/scrolling/index.html I've been trying to hack other bits of javascript I've found on to it but I've had no luck. I would really apperciate any help. Long story short, I'm a novice webdesigner basically working with the local people, and small businesses. My Javascript abilities are sub-par so I normally try to follow tutorials or examples to implement java for now. Although I digress. To the point... I'm coding a web site for a photographer and need a natural looking picture selecting menu. For example... X = hidden image not scrolled into view O = image in line of sight X - X - X - X - O - O - O - O - X - X - X - X Now you kinda grasp what I'm attempting to do here.. anyone know of a good tutorial or example showing how to do this? I've seen several auto scrolling menus but that's not what I'm looking for. I just want an intuitive nav bar for pics... WHY IS THIS SO HARD!!!! Thanks for your time in advance. I have 4 images and these images are changing automatically with duration of 2 seconds with show hide animation. and there are 4 bullets with mentioned above 4 images. these bullets are highlighting for example if image number 1 is showing than bullet number 1 is highlighting. same thing for other 3 bullets and images please send me the code for it Hi, I have a thumbnail gallery on my website. The thumbnails can be opened in a new window using: Code: <a href="/images/flowers22.jpg" rel="nofollow" target="_blank"><img src="images/flowers.jpg" alt="flowers" onClick="MM_openBrWindow('/images/flowers22.jpg','','status=yes,width=630,height=379');return false" /></a>
I have inserted javascript code into my .js stylesheet to disable the right clicking of images on the page where the thumbnails a Code: var clickmessage="Apologies, images cannot be copied."
function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}
function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}
if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
However, when the images open in a new window, the 'no right click' function does not apply. Does anyone know how to disable the right click for the newly opened images? Many thanks! Hi, I found a nice simple javascript slider but there is a small change I want to make. How can I make the slider pause for one or two seconds when the image has slid fully into position ? PHP Code: <style> #ParentDiv { margin: auto; width: 200px; overflow: hidden; } #ChildDiv { width: 6000px; position:relative; cursor:pointer; } #ParentDiv img { float: left; padding: 3px; margin: 0px; } </style> <script type="text/javascript"> //Array Of Image, [URL, width of Image, LinkTo] var t; var StepTime=20; var StepPixel=2; var ImgPadding=3; var ParentDivLen=200; var Img= Array( ["http://mobi6.net/images/screen1.png", 200, "index.php"], ["http://mobi6.net/images/screen2.png", 200, "index.php"], ["http://mobi6.net/images/screen3.png", 200, "index.php"], ["http://mobi6.net/images/screen1.png", 200, "index.php"], ["http://mobi6.net/images/screen2.png", 200, "index.php"], ["http://mobi6.net/images/screen3.png", 200, "index.php"], ["http://mobi6.net/images/screen1.png", 200, "index.php"], ["http://mobi6.net/images/screen2.png", 200, "index.php"], ["http://mobi6.net/images/screen3.png", 200, "index.php"] ); var Pos=3; var Len=Img.length; var DivWidth=0; var MoreImage=0; function goURL(URLS) { document.location.href=URLS; } for(i=0;i<Len;i++) { DivWidth+=Img[i][1] + ImgPadding*2; if(MoreImage==0 && DivWidth>ParentDivLen)MoreImage=i; } function getE(id) { return document.getElementById(id); } function Dr_Img(IMG) { return '<img src="'+ IMG[0] + '" onclick="goURL(\'' + IMG[2] + '\')">'; } function Dr_ImgArr() { var str=''; for(i=0;i<Len;i++) str += Dr_Img(Img[i]); for(i=0;i<MoreImage;i++)str += Dr_Img(Img[i]); document.write(str); } function DoSlide() { if(Pos==0)Pos=-1; divtg=getE('ChildDiv'); Pos-=StepPixel; if(Pos<-DivWidth)Pos=0; divtg.style.left=Pos +'px'; t=setTimeout('DoSlide()',StepTime); } function SlideStop() { clearTimeout(t); } function setmouse(id) { if(id==1) { DoSlide(); } else { SlideStop(); } } </script> </head> <body onload="DoSlide()"> <div id="ParentDiv"> <div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);"> <script> Dr_ImgArr(); </script> </div> </div> I have tried adding wait(2) in a couple of places but the script just failed to run. Any ideas ? Thanks. . I have some text that I don't want to display until 2 seconds after the previous text. The sleep(2); function won't work for what I am doing.
I have a site with a lot of animated gifs and I was wondering if there was a way to (on page load) stop all gif animations (only show first image frame). Then when you click a link, it will animate the animated gifs.
Instead of using setTimeout() or setInterval(), I wrote a function like this: Code: function pause(time)
{ var currentTime=(new Date()).getTime();
while (currentTime+time > (new Date()).getTime());
}
However, it doesn't work as expected. if you append a character to the value of button, you will get the result at one time. e.g. Code: for (var i=0; i<5; i++)
{ aButton.value+="2 ";
pause(2000);
}
then the webpage wait 10 secs then display 2 2 2 2 2 while it should append '2' every 2 secs ... so is there real pause mechanism in js? (besides alert() etc which makes the background totally blank...) So, I'm new to Javascript but really just need the one code. I've tried the tutorials but I have never worked well with those -- I've always found it easier to actually be working with someone. But anyway. Basically, I need something sort of like this -- you click the thumbnail and the image appears in that predetermined spot. One thing, though: the images have to layer over each other. Like, you click image A, and it appears in the spot. You click image B, and it appears on top of image A. It'd be even better if when you clicked Image A it appeared and then you clicked image A again and it disappeared, but I'm going to try to start small. I've gone through the tutorials and have a sort of ish understanding about what some of the parts of the codes do, and I've been told I'm a fast-ish learner, so I think I'll catch the hang of this quick. Thank you! <3 Ahoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. I have a banner but it keeps rotating even when you mouse over it. Is there a simple code I can add to the code below so that the banner will paused when you mouse over it? Thanks! Jeremy Quote: </script> <script type="text/javascript"> $(function() { //some elements.. var $ps_container = $('#ps_container'), $ps_image_wrapper = $ps_container.find('.ps_image_wrapper'), $ps_next = $ps_container.find('.ps_next'), $ps_prev = $ps_container.find('.ps_prev'), $ps_nav = $ps_container.find('.ps_nav'), $tooltip = $ps_container.find('.ps_preview'), $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'), $links = $ps_nav.children('li').not($tooltip), total_images = $links.length, currentHovered = -1, current = 0, $loader = $('#loader'); /*check if you are using a browser*/ var ie = false; if ($.browser.msie) { ie = true;//you are not!Anyway let's give it a try } if(!ie) $tooltip.css({ opacity : 0 }).show(); /*first preload images (thumbs and large images)*/ var loaded = 0; $links.each(function(i){ var $link = $(this); $link.find('a').preload({ onComplete : function(){ ++loaded; if(loaded == total_images){ //all images preloaded, //show ps_container and initialize events $loader.hide(); $ps_container.show(); //when mouse enters the pages (the dots), //show the tooltip, //when mouse leaves hide the tooltip, //clicking on one will display the respective image $links.bind('mouseenter',showTooltip) .bind('mouseleave',hideTooltip) .bind('click',showImage); //navigate through the images $ps_next.bind('click',nextImage); $ps_prev.bind('click',prevImage); } } }); }); function showTooltip(){ var $link = $(this), idx = $link.index(), linkOuterWidth = $link.outerWidth(), //this holds the left value for the next position //of the tooltip left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2, //the thumb image source $thumb = $link.find('a').attr('rel'), imageLeft; //if we are not hovering the current one if(currentHovered != idx){ //check if we will animate left->right or right->left if(currentHovered != -1){ if(currentHovered < idx){ imageLeft = 75; } else{ imageLeft = -75; } } currentHovered = idx; //the next thumb image to be shown in the tooltip var $newImage = $('<img/>').css('left','0px') .attr('src',$thumb); //if theres more than 1 image //(if we would move the mouse too fast it would probably happen) //then remove the oldest one (:last) if($ps_preview_wrapper.children().length > 1) $ps_preview_wrapper.children(':last').remove(); //prepend the new image $ps_preview_wrapper.prepend($newImage); var $tooltip_imgs = $ps_preview_wrapper.children(), tooltip_imgs_count = $tooltip_imgs.length; //if theres 2 images on the tooltip //animate the current one out, and the new one in if(tooltip_imgs_count > 1){ $tooltip_imgs.eq(tooltip_imgs_count-1) .stop() .animate({ left:-imageLeft+'px' },150,function(){ //remove the old one $(this).remove(); }); $tooltip_imgs.eq(0) .css('left',imageLeft + 'px') .stop() .animate({ left:'0px' },150); } } //if we are not using a "browser", we just show the tooltip, //otherwise we fade it // if(ie) $tooltip.css('left',left + 'px').show(); else $tooltip.stop() .animate({ left : left + 'px', opacity : 1 },150); } function hideTooltip(){ //hide / fade out the tooltip if(ie) $tooltip.hide(); else $tooltip.stop() .animate({ opacity : 0 },150); } function showImage(e){ var $link = $(this), idx = $link.index(), $image = $link.find('a').attr('href'), $currentImage = $ps_image_wrapper.find('img'), currentImageWidth = $currentImage.width(); //if we click the current one return if(current == idx) return false; //add class selected to the current page / dot $links.eq(current).removeClass('selected'); $link.addClass('selected'); //the new image element var $newImage = $('<img/>').css('left',currentImageWidth + 'px') .attr('src',$image); //if the wrapper has more than one image, remove oldest if($ps_image_wrapper.children().length > 1) $ps_image_wrapper.children(':last').remove(); //prepend the new image $ps_image_wrapper.prepend($newImage); //the new image width. //This will be the new width of the ps_image_wrapper var newImageWidth = $newImage.width(); //check animation direction if(current > idx){ $newImage.css('left',-newImageWidth + 'px'); currentImageWidth = -newImageWidth; } current = idx; //animate the new width of the ps_image_wrapper //(same like new image width) $ps_image_wrapper.stop().animate({ width : newImageWidth + 'px' },350); //animate the new image in $newImage.stop().animate({ left : '0px' },350); //animate the old image out $currentImage.stop().animate({ left : -currentImageWidth + 'px' },350); e.preventDefault(); } function nextImage() { var cache=''; cache = cache==''?current+':'+total_images:cache; if(current < total_images) $links.eq(current+1).trigger('click'); if(cache == (current+':'+total_images)) $links.eq(0).trigger('click'); } function prevImage(){ if(current > 0){ $links.eq(current-1).trigger('click'); } } setInterval( function(){ $('.ps_next').click(); },4000 ); Hello everyone, 1.) I'm not a programmer beyond HTML, CSS and only a basic knowledge of javascript, it doesn't take much for me to get lost beyond my skills in javascript. 2.) Is someone willing to add and explain the changes to the code below to include a pause on mouseover? Code: var currentSlide = 1;
var maxSlides = 0;
function fadeImage(){
opacity = 100;
if(steps < 4){
steps += 1;
opacity = opacity / steps;
imageObj = document.getElementById("slide-"+currentSlide);
imageObjN = document.getElementById("slide-"+nextSlide);
imageObjN.style.display = "block";
imageObj.style.opacity = "" + opacity / 100;
imageObjN.style.opacity = "" + ((steps * 25) / 100);
//fade
slideTimeout = setTimeout("fadeImage()", 170); /** fade transition speed */
}else{
steps = 1;
document.getElementById("slide-"+currentSlide).style.display = "none";
currentSlide += 1;
if(currentSlide > maxSlides){
currentSlide = 1;
}
showSlide();
}
}
function initSlideshow(){
slidesCollection = document.getElementById("slides").children;
maxSlides = slidesCollection.length;
for (var i=0; i < maxSlides; i++){
slidesCollection[i].id = "slide-"+(i+1);
if (i > 0)
slidesCollection[i].style.display = "none";
}
steps = 1;
nextSlide = 2;
slideTimeout = 0;
showSlide();
}
function showSlide(){
clearTimeout(slideTimeout);
nextSlide = currentSlide + 1;
if (currentSlide >= maxSlides){
nextSlide = 1;
}
slideTimeout = setTimeout("fadeImage()", 8300); /** display time of slide */
}
I wrote a simple javescript for a slideshow that cycles through images and displays where the image is but I am wondering how to pause the slideshow and then add in a fading effect. Any help would be appreciated. index.html PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Page 1</title> <link rel="stylesheet" type="text/css" href="css.css"></link> <script language="JavaScript" type="text/javascript" src="js.js"></script> </head> <body onLoad="LoadMenu(); PlaceArrow();"> <table border="0" cellspacing="0" cellpadding="0" id="hmt" summary="layout" align="center"> <tr><td colspan="4"><div id="htop"><img border="0" width="240" height="40" alt="" src="img/homet.png"></div></td></tr> <tr valign="top"> <td id="hmtgut"><img border="0" width="50" height="250" alt="" src="img/homel.png"></td> <td id="hmtl"><img border="0" width="280" height="270" src="img/homelogo.png"></td> <td id="hmtr"> <script language="JavaScript" type="text/javascript"> <!-- //preload images var image1=new Image() image1.src="photos/slides/photo01.jpg" var image2=new Image() image2.src="photos/slides/photo02.jpg" var image3=new Image() image3.src="photos/slides/photo03.jpg" var image4=new Image() image4.src="photos/slides/photo04.jpg" var image5=new Image() image5.src="photos/slides/photo05.jpg" var image6=new Image() image6.src="photos/slides/photo06.jpg" var image7=new Image() image7.src="img/thumbarrow.png" var image8=new Image() image8.src="img/spacer.gif" var cphoto = Math.ceil(6*Math.random()); document.write('<div id="homephoto"><a href="javascript:slidelink()"><img border="0" name="photo" width="230" height="230" src="photos/slides/photo0'+cphoto+'.jpg"></a></div>'); var step=cphoto var whichimage=step function slideit() { if (!document.images) return document.images.photo.src=eval("image"+step+".src") whichimage=step if (step<6) { step=parseInt(Math.ceil(6*Math.random())) } else { step=1 } setTimeout("slideit()",3000) var i = "a" + whichimage document.images.a1.src=eval("image8.src") document.images.a2.src=eval("image8.src") document.images.a3.src=eval("image8.src") document.images.a4.src=eval("image8.src") document.images.a5.src=eval("image8.src") document.images.a6.src=eval("image8.src") document.images[i].src=eval("image7.src") } slideit() function slidelink() { if (whichimage==1) window.open('img.php?img=1','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==2) window.open('img.php?img=2','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==3) window.open('img.php?img=3','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==4) window.open('img.php?img=4','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==5) window.open('img.php?img=5','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') else if (whichimage==6) window.open('img.php?img=6','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400') } //--> </script> <noscript> <div id="homephoto"> <img border="0" name="photo" width="230" height="230" src="photos/slides/photo01.jpg"> </div> </noscript> </td> <td id="mtmenu" valign="middle">Links Here</td> </tr> <tr> <td colspan="4"> <div id="hfoot"> <div id="hbot"><img border="0" width="240" height="20" alt="" src="img/homeb.png"></div> <div id="thumb1"> <div><img border="0" vspace="9" hspace="2" name="a1" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(1); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo01thumb.jpg"></a></div> </div> <div id="thumb2"> <div><img border="0" vspace="9" hspace="2" name="a2" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(2); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo02thumb.jpg"></a></div> </div> <div id="thumb3"> <div><img border="0" vspace="9" hspace="2" name="a3" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(3); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo03thumb.jpg"></a></div> </div> <div id="thumb4"> <div><img border="0" vspace="9" hspace="2" name="a4" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(4); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo04thumb.jpg"></a></div> </div> <div id="thumb5"> <div><img border="0" vspace="9" hspace="2" name="a5" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(5); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo05thumb.jpg"></a></div> </div> <div id="thumb6"> <div><img border="0" vspace="9" hspace="2" name="a6" width="30" height="6" alt="" src="img/spacer.gif"></div> <div><a onClick="LoadPhoto(6); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo06thumb.jpg"></a></div> </div> </div> </td> </tr> </table> </table> </body> </html> js.js PHP Code: function PlaceArrow() { if ( cphoto ) { carrow = "a" + cphoto; document.images[carrow].src = "img/thumbarrow.png"; } } function LoadPhoto (i) { if (document.images) { carrow = "a" + cphoto; document.images[carrow].src = "img/spacer.gif"; narrow = "a" + i; nphoto = "photo0" + i; document.images[narrow].src = "img/thumbarrow.png"; document.images['photo'].src = "photos/slides/" + nphoto + ".jpg"; cphoto = i; } } Hey guys, So I got my autoscrolling javascript working, but I need to make it pause on mouseover. How do I accomplish that with my javascript code? Code: <script type="text/javascript">
var defaultStep=1;
var step=defaultStep;
var timer;
function scrollDiv(id,s){
var obj=document.getElementById(id);
var iScrollTop = obj.scrollTop;
step=s||step;
if (iScrollTop == 0){
step=defaultStep;
}
else if (obj.clientHeight + iScrollTop - obj.scrollHeight==0){
step=-defaultStep;
}
clearTimeout(timer);
obj.scrollTop+=step;
timer=setTimeout(function(){ scrollDiv(id); },100)
}
function stopMe(){
clearTimeout(timer);
}
function scrollMe(id){
scrollDiv(id)
}
</script>
Thanks! Hello! I was looking for a way to pause animated gifs per command, and I found a thread in this forum with the appropriate instruction: http://www.codingforums.com/showthread.php?t=177543 I used the code example from there and adjusted it to my needs on my website: http://www.baelavay.com/v6 The code works as it should! (The button is in the top-left corner) But there are 2 things I would want to improve. Unfortunately I can't fix them myself, maybe you can help 1) I don't want to use a button for pausing the gifs. Instead, I want the gifs to pause when Code: <img id="tiles-img" ...> is clicked. So what I tried is to replace the line Code: obj=document.getElementById('button');
with Code: obj=document.getElementById('tiles-img');
But then, it doesn't work anymore. Why? 2) (*edit: RESOLVED) The button only starts working from the 2nd click on? (No gif pausing at 1st click) Thank you in advance. hello, It is a insult to newbie to cal myself one, but I have a blog that I am trying to get a simple bit of code to work on. I have text rotator that I found and have made it work for my purposes, but I need it to pause when someone mouses over and restart when then mouse off. I have found code snipets online but I am not smart enough to figure out where they fit in....Help would be very appreciated the code it below.... Code: <div id="quotetext" >
text
</div>
<script type="text/javascript" >
var myquotes = new Array(
'quote 1',
'quote 2',
'qoute 3'
);
function rotatequote()
{
thequote = myquotes.shift(); //Pull the top one
myquotes.push(thequote); //And add it back to the end
document.getElementById('quotetext').innerHTML = thequote;
// This rotates the quote every 10 seconds.
// Replace 10000 with (the number of seconds you want) * 1000
t=setTimeout("rotatequote()",5000);
}
// Start the first rotation.
rotatequote();
</script>
Hi, We have a marquee that we use occasionally at work when we want to announce something important. The text is dynamic and will sometimes contain links. I need to make it so that the marquee stops when you mouseover it and then begins again when you mouseout. I can get this to work just fine. The problem is, I want the pause to happen when you hover over the text ONLY, not the entire 690 width TD! I tried wrapping a span around the text and putting an action on it, but the marquee still stops even when you have your cursor out in never-never land to the right. Does anyone know how to make this work in IE without using a huge JavaScript file like on Dynamic Drive? Code: <td width="690" valign="middle" class="headerNewsFlash"> <marquee onMouseOver="this.stop();" onMouseOut="this.start();" scrolldelay="0" scrollamount="4">News Flash Text Goes Here</marquee> </td> Thanks! Hi all and hope that you can help. I have an image slideshow that works fine and, I may be being over ambitious but I'd like to combine the Play and Pause buttons so that when the slideshow is playing, the Play button is replaced by the Pause button and when it is paused the Pause button is replaced by the Play button. Sounds like a simple JavaScipt change image function but both buttons have roll over effects and they both have different JavaScript functions assigned to them so I'm struggling to get my head around what I need to do. Thanks for your interest, R I've highlighted the relevant chunks of code below... The HTML / CSS... Code: <style type="text/css">
#midcol {
padding: 0 25px;
width: 672px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/first.gif) no-repeat 0 0; }
#previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/previous.gif) no-repeat 0 0; }
#pause {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/pause.gif) no-repeat 0 0; }
#pplay {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/play.gif) no-repeat 0 0; }
#next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/next.gif) no-repeat 0 0; }
#last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/last.gif) no-repeat 0 0; }
#first:hover {background:url(navbars/first.gif) no-repeat 0 -32px; }
#previous:hover {background:url(navbars/previous.gif) no-repeat 0 -32px;}
#pause:hover {background:url(navbars/pause.gif) no-repeat 0 -32px;}
#pplay:hover {background:url(navbars/play.gif) no-repeat 0 -32px;}
#next:hover {background:url(navbars/next.gif) no-repeat 0 -32px;}
#last:hover {background:url(navbars/last.gif) no-repeat 0 -32px;}
</style>
</head>
<body>
<div id="midcol">
<table width="592" border="0">
<tr >
<td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr>
<tr><td colspan="8"><br /></td></tr>
<tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr>
<tr height="33">
<td width="160"></td>
<td id="first" onclick="first();clearTimeout(timerID);"></td>
<td id="previous" onclick="previous();clearTimeout(timerID);"></td>
<td id="pause" onclick="clearTimeout(timerID);"></td>
<td id="pplay" onclick="swapPicture();"></td>
<td id="next" onclick="next();clearTimeout(timerID);"></td>
<td id="last" onclick="last();clearTimeout(timerID);"></td>
<td width="160"><form name="dropdown" action="">Slide duration:
<select id="duration" onchange="setInterval(this.form.duration);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</form></td>
</tr>
</table>
The JavaScript... Code: var dimages=new Array();
var numImages=31;
var interval = 3000;
var image_dir = "images/large/"
for (i=0; i<numImages; i++)
{
dimages[i]=new Image();
dimages[i].src=image_dir+(i+1)+".jpg";
}
var imageCaption = new Array();
var ImageNum = 0;
imageCaption[ImageNum++] = "Caption 1.";
imageCaption[ImageNum++] = "Caption 2.";
etc. etc.
var curImage=-1;
function swapPicture()
{
if (document.images) // does the browser support image changes?
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded?
{
var target=0;
if (document.images.myImage)
target=document.images.myImage;
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;
if (document.all && document.getElementById("myImage"))
target=document.getElementById("myImage");
cap = imageCaption[nextImage];
document.getElementById('caption').innerHTML=cap;
// make sure target is valid. It might not be valid
// if the page has not finished loading
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
doTimer(interval);
}
else
{
setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again.
}
}
}
function first(){ // Goes to the 1st image and stops
curImage=-1;
stopTimer();
swapPicture();
}
function last(){ // Goes to the last image and stops
curImage=numImages-2;
stopTimer();
swapPicture();
}
function previous(){ // Goes to the previous image and stops
curImage=curImage-2;
stopTimer();
swapPicture();
}
function next(){ // Goes to the next image and stops
stopTimer();
swapPicture();
}
function doTimer(interval){ // The Play button
timerID=setTimeout("swapPicture()",interval);
}
function stopTimer(){ // The Pause button
clearTimeout(timerID);
}
function setInterval(t){ // The slide duration drop down box.
var e = document.getElementById("duration");
interval = (e.options[e.selectedIndex].value)*1000;
}
doTimer(interval); // Starts the slideshow on load.
I have a rotating content js, and I want to add a pause to it when its mosed over, heres the current code: Code: <body>
<a id="imageurl" ><img id="Rotating1" border="0"></img></a>
<script language="JavaScript">
function RotateImages(Start)
{
var a = new Array("image1","image2","image3","image4");
var c = new Array("www.google.ca", "www.google.ca", "www.google.ca", "www.google.ca");
var b = document.getElementById('Rotating1');
var d = document.getElementById('imageurl');
if(Start>=a.length)
Start=0;
b.src = a[Start];
d.href = c[Start];
window.setTimeout("RotateImages(" + (Start+1) + ")",3000);
}
RotateImages(0);
</script>
</body>
|
|||||||