|
JavaScript - Need Content Rotator To Stop Rotating When Clicking On A Tab
My site is
http://gofi.netai.net/ I don't want it to completely stop or pause when the users mouse is over the page but keeps rotating. I want it to stop for good when the users mouse clicks on one of the tabs. I wanted a auto rotator so the user can see all my pages up front and fast before moving to anther site. This is snip-it of the code but you can see in the complete code in the source code. I'm new at this can you help? script type="text/javascript"> $(document).ready(function(){ $("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true); }); Similar TutorialsHello guys, You were all very kind to help me a few months ago when I was trying to create the code which is posted below. it is a table of banner ads that will rotate on my website and the appropriate link follows the appropraite ad when they rotate. everything is working fine except that when you click on one of the ads ( which is a link), the link works but the page displays an error at the bottom as soon as any link is clicked. Since this type of hyperlink is associated with the javascript, im not sure how to correct the issue. maybe it is a simple thing. can anyone take a look at this and help me figure out the issue? thanks. 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" />
<title>.</title>
<script type="text/javascript">
var ImageArray = [ // add paths, if needed
['randoms/0.jpg','http://0.com'],
['randoms/1.jpg','http://1.com'],
['randoms/2.jpg','http://2.com'],
['randoms/3.jpg','http://3.com'],
['randoms/4.jpg','http://4.com'],
['randoms/5.jpg','http://5.com'],
['randoms/6.jpg','http://6.com'],
['randoms/7.jpg','http://7.com'],
['randoms/8.jpg','http://8.com'],
['randoms/9.jpg','http://9.com'],
['randoms/10.jpg','http://10.com'],
['randoms/11.jpg','http://11.com'],
['randoms/12.jpg','http://12.com'],
['randoms/13.jpg','http://13.com'],
['randoms/14.jpg','http://14.com'],
['randoms/15.jpg','http://15.com'] // No comma after last entry
];
function randOrd() {
return (Math.round(Math.random())-0.5);
}
function ChangeImages() {
var ImgPtr = new Array();
for (var i=0; i<ImageArray.length; i++) { ImgPtr[i] = i; }
ImgPtr = ImgPtr.sort(randOrd);
var tmp = '';
for (var i=0; i<ImgPtr.length; i++) {
tmp = 'tImg'+i;
document.getElementById(tmp).src = ImageArray[ImgPtr[i]][0];
document.getElementById(tmp).alt = ImageArray[ImgPtr[i]][1];
tmp = 'lImg'+i;
document.getElementById(tmp).href = ImageArray[ImgPtr[i]][1];
}
}
var TimerAction = 0;
function startTimer() {
TimerAction = setInterval('ChangeImages()',3000);
}
function stopTimer() {
clearTimeout(TimerAction);
}
</script>
<style type="text/css">body { background-color: #000000; margin: 0;
}
</style></head>
<body onLoad="startTimer();ChangeImages()" >
<table width="250" border="0" cellpadding="0" id="ads">
<tr><td>
<a href="" id="lImg0" onclick="return gotoLink(this.id,0)"target="_blank">
<img id="tImg0" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg1" onclick="return gotoLink(this.id,1)"target="_blank">
<img id="tImg1" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg2" onclick="return gotoLink(this.id,2)"target="_blank">
<img id="tImg2" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg3" onclick="return gotoLink(this.id,3)"target="_blank">
<img id="tImg3" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg4" onclick="return gotoLink(this.id,4)"target="_blank">
<img id="tImg4" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg5" onclick="return gotoLink(this.id,5)"target="_blank">
<img id="tImg5" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg6" onclick="return gotoLink(this.id,6)"target="_blank">
<img id="tImg6" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg7" onclick="return gotoLink(this.id,7)"target="_blank">
<img id="tImg7" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg8" onclick="return gotoLink(this.id,8)"target="_blank">
<img id="tImg8" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg9" onclick="return gotoLink(this.id,9)"target="_blank">
<img id="tImg9" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg10" onclick="return gotoLink(this.id,10)"target="_blank">
<img id="tImg10" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg11" onclick="return gotoLink(this.id,11)"target="_blank">
<img id="tImg11" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg12" onclick="return gotoLink(this.id,12)"target="_blank">
<img id="tImg12" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg13" onclick="return gotoLink(this.id,13)"target="_blank">
<img id="tImg13" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg14" onclick="return gotoLink(this.id,14)"target="_blank">
<img id="tImg14" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg15" onclick="return gotoLink(this.id,15)"target="_blank">
<img id="tImg15" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
</table>
</body>
</html>
Dear All, please i want to create content image rotator with thumbs image horizontal and starts automatically.you can understand more when you see http://maktoob.yahoo.com/?p=us many thanks for your efforts Id like to create a rotating content for my homepage, using 4 images, all of which id like to be hyperlinked to there pages.
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>
Ok so i have wrote some code which can be seen he http://www.runningprofiles.com/members/include/test.php This works great but when i add the code to the page i want it on (include "include/test.php" for some reason the code does not work... the text is delayed and then lags behind the images.. this can been seen here http://www.runningprofiles.com/members/ I have no idea why its happening! Code for the code is Code: <html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26659912.html</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
function advance()
{
$("#slideshow").cycle("next");
cycleCaption();
}
var displayedIndex = 0
function cycleCaption()
{
$("#caption").children().each( function(index) {
$(this).css("font-weight", (index==displayedIndex)? "bold" : "normal" );
});
displayedIndex = (++displayedIndex==$("#caption").children().length)? 0 : displayedIndex;
}
$(function() {
$("#slideshow").cycle({ timeout: 0 });
$("img").each( function() {
$("<div />").html($(this).attr("title")).appendTo($("#caption"));
});
cycleCaption();
setInterval( "advance()", 2000 );
});
</script>
</head>
<body>
<div id="slideshow" style="float: left;">
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14882_jruqg6x4uu6frw2g872b.jpg" title="Aisling Cuffe Before Foot Locker" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14879_mzcgn05auhs24fnsygc1.jpg" title="Foot Locker Ballerness" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14880_u1npsmglw7b9t6hmoqhu.jpg" title="Foot Locker The Rocket" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14887_9bblfhhvc0x66vebgjua.jpg" title="NCAA D2 Cro" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14884_mud4ewe6uh6ihrrpux6g.jpg" title="NXN Recap and Results" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14865_y1kt8vzejkvz25k075x2.jpg" title="Give Your " />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14877_1mlnygbenofquj5h3mcz.jpg" title="NCAA D2 XC Champ" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14855_9g971maove1jyos0h9zk.jpg" title="Defending" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14850_6u22ylfzym7sxq1zw8p8.jpg" title="NXN 121" />
</div>
<div id="caption" style="float: left;">
</div>
</body>
</html>
Hi, I've been searching for about an hour now for an div id javascript/jquery rotator dont need to have buttons just needs to roatate 3 divs every 5 secs can anyone help thanks. +rep Hello, Im new and need help with an image rotator script I got from "wowslider" if anyone ever heard of it. I have the following code on my website (please note that the CSS and javascript were just pre-made and I barely adjusted anything if at all; all names of the tags are not mine): 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>unnamed</title>
<script src="scripts/wowslider.js" type="text/javascript"></script>
<style type="text/css">
/* bottom center */
#wowslider-container1 .ws_bullets {
top:0;
right: 0;
}
#wowslider-container1 {
/*overflow: hidden; */
zoom: 1;
position: relative;
width:1032px;
margin:0 auto;
z-index:100;
border:none;
}
#wowslider-container1 .ws_images{
width:1032px;
height:500px;
overflow:hidden;
position:relative;
}
#wowslider-container1 .ws_images a{
color:transparent;
}
#wowslider-container1 .ws_images img{
top:0;
left:0;
border:none 0;
max-width: none;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container1 .ws_bullets {
font-size: 0px;
padding: 5px;
float: left;
position:absolute;
z-index:70;
top:450px;
right:900px;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
#wowslider-container1 .ws_bullets a {
width:22px;
height:20px;
background: url(images/backgrounds/bullet.png) left top;
float: left;
text-indent: -1000px;
position:relative;
color:transparent;
}
#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
background-position: 0 100%;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-16px;
z-index:60;
height: 50px;
width: 39px;
background-image: url(images/backgrounds/arrows.png);
}
#wowslider-container1 a.ws_next{
background-position: 100% 0;
right:0px;
}
#wowslider-container1 a.ws_prev {
left:0px;
background-position: 0 0;
}
#wowslider-container1 .ws-title{
position: absolute;
bottom:7%;
left: 0;
margin-right:5px;
z-index: 50;
background: #FFF;
color: #000;
padding: 10px;
font-size: 19px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
text-shadow: 1px 1px 0 #fff;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 13px;
}
</style>
</head>
<!-- Slideshow Backgrounds -->
<div id="wowslider-container1">
<div class="ws_images">
<div><img src="images/backgrounds/test1.jpg" alt="test1" title="test1" id="wows0"/><span style="top:150px; right:300px; color:red; font-weight:bold;">TEXTTEXTTEXTTEXTTEXT</span></div>
<div><img src="images/backgrounds/test2.jpg" alt="test2" title="test2" id="wows1"/></div>
<div><img src="images/backgrounds/test3.jpg" alt="test3" title="test3" id="wows2"/></div>
<div><img src="images/backgrounds/test4.jpg" alt="test4" title="test4" id="wows3"/></div>
</div>
<div class="ws_bullets"><div>
<a href="#wows0" title="test1">1</a>
<a href="#wows1" title="test2">2</a>
<a href="#wows2" title="test3">3</a>
<a href="#wows3" title="test4">4</a>
</div>
</div>
<script type="text/javascript" src="scripts/wow_script.js"></script>
<!-- END ROTATOR -->
</body>
</html>
The following is the jscript used in reference (two external files): 1)wow_script.js Code: function ws_fade(b,a){var c=jQuery;a.each(function(d){if(!d){c(this).show()}else{c(this).hide()}});this.go=function(d,e){c(a.get(d)).fadeIn(b.duration);c(a.get(e)).fadeOut(b.duration);return d}};// -----------------------------------------------------------------------------------
jQuery("#wowslider-container1").wowSlider({effect:"fade",prev:"",next:"",duration:20*100,delay:90*100,outWidth:1032,outHeight:500,width:1032,height:500,autoPlay:true,stopOnHover:true,loop:false,bullets:true,caption:false,controls:true});
2) wowslider.js Code: if(!jQuery.fn.wowSlider){jQuery.fn.wowSlider=function(b){var i=this;var g=jQuery;b=g.extend({effect:function(f,d){var t=jQuery;d.each(function(H){if(!H){t(this).show()}else{t(this).hide()}});this.go=function(H,I){t(d.get(H)).fadeIn(f.duration);t(d.get(I)).fadeOut(f.duration);return H}},prev:"",next:"",duration:1000,delay:20*100,captionDuration:1000,outWidth:960,outHeight:360,width:960,height:360,caption:true,controls:true,autoPlay:true,bullets:true,stopOnHover:0,preventCopy:1},b);b.loop=b.loop||Number.MAX_VALUE;var E=i.find(".ws_images>*");var v=E.length;b.stopOn=((b.stopOn||0)+v)%v;var D;if(b.preventCopy){D=g('<div><a href="#" style="display:none;position:absolute;left:0;top:0;width:100%;height:100%"></a></div>').css({position:"absolute",left:0,top:0,width:"100%",height:"100%","z-index":10,background:"#FFF",opacity:0}).appendTo(i).find("A").get(0)}E.each(function(f){var d=g(this).html()||"";var t=d.indexOf(">",d);if(t>=0){g(this).data("descr",d.substr(t+1));if(t<d.length-1){g(this).html(d.substr(0,t+1))}}g(this).css({"font-size":0})});var k=E.find("IMG");var a=0;function s(t,f,d){t=((t%v)+v)%v;if(a==t){return}var t=o.go(t,a,f,d);if(t<0){return}r(t);if(b.caption){j(E[t])}a=t;if(b.onStep){b.onStep(t)}}var C,A,e=0;var u=i.get(0);if(u.addEventListener){u.addEventListener("touchmove",function(t){if(e){var f=(C-t.touches[0].pageX)/20;var d=(A-t.touches[0].pageY)/20;if((Math.abs(f)>1)||(Math.abs(d)>1)){C=A=e=0;y(t,a+((f+d)>0?1:-1),f,d)}}},false);u.addEventListener("touchstart",function(d){if(d.touches.length==1){C=d.touches[0].pageX;A=d.touches[0].pageY;e=1}else{e=0}},false);u.addEventListener("touchend",function(d){e=0},false)}function r(f){if(b.bullets){n(f)}if(D){var d=E.get(f).href;if(d){D.setAttribute("href",d);D.setAttribute("target",E.get(f).target);D.style.display="block"}else{D.style.display="none"}}}var q;function z(){w();if(b.autoPlay){q=setTimeout(function(){s(a<v-1?a+1:0);if(a==b.stopOn&&!--b.loop){b.autoPlay=0}z()},b.delay+b.duration)}}function w(){if(q){clearTimeout(q)}q=null}function y(H,t,f,d){w();H.preventDefault();s(t,f,d);z()}g(k.get(0)).css("z-index",1);k.css("position","absolute");if(typeof b.effect=="string"){b.effect=window["ws_"+b.effect]}var o=new b.effect(b,k,g(".ws_images",i));E.find("IMG").css("visibility","visible");var p=c=g(".ws_images",i);var m=" ";c=m?g("<div></div>"):0;if(c){c.css({position:"absolute",right:"2px",bottom:"2px",padding:"0 0 0 0"});p.append(c)}if(c&&document.all){var B=g('<iframe src="javascript:false"></iframe>');B.css({position:"absolute",left:0,top:0,width:"100%",height:"100%",filter:"alpha(opacity=0)"});B.attr({scrolling:"no",framespacing:0,border:0,frameBorder:"no"});c.append(B)}var F=c?g(document.createElement("A")):c;if(F){F.css({position:"relative",display:"block","background-color":"#E4EFEB",color:"#837F80","font-family":"Lucida Grande,sans-serif","font-size":"11px","font-weight":"normal","font-style":"normal","-moz-border-radius":"5px","border-radius":"5px",padding:"1px 5px",width:"auto",height:"auto",margin:"0 0 0 0",outline:"none"});F.attr({href:"http://"+m.toLowerCase()});F.html(m);F.bind("contextmenu",function(d){return false});c.append(F)}if(b.controls){var x=g('<a href="#" class="ws_next">'+b.next+"</a>");var h=g('<a href="#" class="ws_prev">'+b.prev+"</a>");i.append(x);i.append(h);x.bind("click",function(d){y(d,a+1)});h.bind("click",function(d){y(d,a-1)})}function G(){var t=i.find(".ws_bullets>div");var L=g("a",t);L.click(function(M){y(M,g(M.target).index())});var J=L.find("IMG");if(J.length){var I=g('<div class="ws_bulframe"/>').appendTo(t);var f=g("<div/>").css({width:J.length+1+"00%"}).appendTo(g("<div/>").appendTo(I));J.appendTo(f);g("<span/>").appendTo(I);var H=-1;function K(N){if(N<0){N=0}g(L.get(H)).removeClass("ws_overbull");g(L.get(N)).addClass("ws_overbull");I.show();var O={left:L.get(N).offsetLeft-I.width()/2};var M={left:-J.get(N).offsetLeft};if(H<0){I.css(O);f.css(M)}else{if(!document.all){O.opacity=1}I.stop().animate(O,"fast");f.stop().animate(M,"fast")}H=N}L.hover(function(){K(g(this).index())});var d;t.hover(function(){if(d){clearTimeout(d);d=0}K(H)},function(){L.removeClass("ws_overbull");if(document.all){if(!d){d=setTimeout(function(){I.hide();d=0},400)}}else{I.stop().animate({opacity:0},{duration:"fast",complete:function(){I.hide()}})}});t.click(function(M){y(M,g(M.target).index())})}}function n(d){g(".ws_bullets A",i).each(function(f){if(f==d){g(this).addClass("ws_selbull")}else{g(this).removeClass("ws_selbull")}})}if(b.caption){$caption=g("<div class='ws-title' style='display:none'></div>");i.append($caption);$caption.bind("mouseover",function(d){w()});$caption.bind("mouseout",function(d){z()})}function j(d){var H=g("img",d).attr("title");var t=g(d).data("descr");var f=g(".ws-title",i);f.stop(1,1).stop(1,1).fadeOut(b.captionDuration/3,function(){if(H||t){f.html((H?"<span>"+H+"</span>":"")+(t?"<div>"+t+"</div>":""));l(f,{direction:"left",easing:"easeInOutExpo",complete:function(){if(g.browser.msie){f.get(0).style.removeAttribute("filter")}},duration:b.captionDuration})}})}if(b.bullets){G()}r(0);if(b.caption){j(E[0])}if(b.stopOnHover){this.bind("mouseover",function(d){w()});this.bind("mouseout",function(d){z()})}z();function l(K,P){var M={};var N=["position","top","bottom","left","right"];for(var L=0;L<N.length;L++){M[N[L]]=K[0].style[N[L]]}K.show();var J={width:K.outerWidth(true),height:K.outerHeight(true),"float":K.css("float"),overflow:"hidden",left:K.position().left,top:K.position().top,opacity:0},f=g("<div></div>").css({fontSize:"100%",background:"transparent",border:"none",margin:0,padding:0});K.wrap(f);f=K.parent();if(K.css("position")=="static"){f.css({position:"relative"});K.css({position:"relative"})}else{g.extend(J,{position:K.css("position"),zIndex:K.css("z-index")});K.css({position:"relative",top:0,left:0,right:"auto",bottom:"auto"})}f.css(J).show();var O=P.direction||"left";var t=(O=="up"||O=="down")?"top":"left";var H=(O=="up"||O=="left");var d=P.distance||(t=="top"?K.outerHeight({margin:true}):K.outerWidth({margin:true}));K.css(t,H?(isNaN(d)?"-"+d:-d):d);var I={};I[t]=(H?"+=":"-=")+d;f.animate({opacity:1},{duration:P.duration,easing:P.easing});K.animate(I,{queue:false,duration:P.duration,easing:P.easing,complete:function(){for(var Q in M){K[0].style[Q]=M[Q]}K.parent().replaceWith(K);if(P.complete){P.complete()}}})}return this}}jQuery.extend(jQuery.easing,{easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a}});
The rotator works perfectly with fading the images referenced in and out and the bullets for switching between images works great too, however I am looking to place text OVER the images so it can be highlighted/copied/etc. When I tried to put a SPAN in the code DIV the text I put into the SPAN (i.e. "TEXTTEXTTEXTTEXTTEXT") doesnt appear over the image. I dont know what else to do and Im not sure if its a javascript issue OR a coding issue within the page. Any ideas? Thanks NOTE: To be clear, I want four images, rotating, with four different text pieces to be placed OVER each image. So when one image rotates, its text change as well (to the next image and next set of text). Ok, so I currently have a rotator on my site that rotates every 5 seconds. I'd like to change it to where anytime between 10pm and 7pm, it rotates as normal. But at 7pm I'd like it to stay on one specific image. At 8, it stays on another image. Then at 9, it stays on another image. Basically, I work at at TV station so at 7 I want the graphic to be the show that is on TV. The same at 8 and 9. Here's a link to the js file. http://tinyurl.com/3h5bz6p Hi all, I am using Javascript for rotating 2 images. In the head section, var maxAdNo = 1 var adNo var myAd = new Array() myAd[0] = '<img src="images/sponsor-box-1.jpg" width="322" height="306" border="0">' myAd[1] = '<img src="images/sponsor-box-2.jpg" width="322" height="306" border="0">' In the body, <script type="text/javascript"> <!-- Begin adNo = Math.round(Math.random() * maxAdNo) document.write(myAd[adNo]) // End --> </script> I want to rotate these 2 images 50% / 50% i.e. alternate image to be loaded for every page refresh instead of random. What is to be done? Thank you in advance. I'm trying to slow this image rotator down. I thought I would just change the setInterval part. But it's not working. Quote: $(function() { setInterval( "nextPage()", 7000 ); }); Below is the full script. Am I missing something? Code: // Global variable that controls billboard image rotation
var $rotate = 1;
// Load this script when page loads
$(document).ready(function(){
// Set up a listener so that when anything with a class of 'bbtab'
// is clicked, this function is run.
$('.bbtab').click(function () {
// Turn off autorotation.
$rotate = 0;
// Remove the 'bboard_page_active' class from the visible tab contents.
$('#bboard > ul > li.bboard_page_active').removeClass('bboard_page_active');
// Add the 'bboard_page_active' class to the associated tab contents.
$(this.rel).addClass('bboard_page_active');
return false; //stop the links default action
});
});
function nextPage() {
// id is expected to look like 'bbpage1'.
// We just need the number part at the end so that we can figure out which page is next in the rotation.
var $active_page = $('#bboard > ul > li.bboard_page_active').attr('id') || 'bbpage0';
var $next_page = parseInt($active_page.substring(6)) + 1;
if ($next_page > $('#bboard > ul > li').length) { $next_page = 1; }
if ($rotate == 1) {
// Remove the 'bboard_page_active' class from the active page.
$('#'+$active_page).removeClass('bboard_page_active');
// Add the 'bboard_page_active' class to the next page.
$('#bbpage'+$next_page).addClass('bboard_page_active');
// alert("Active page is " + $active_page + " of " + $total_pages + " and next is " + $next_page);
}
}
$(function() {
setInterval( "nextPage()", 7000 );
});
Hello everyone, I am looking for a solution to make a iframe rotator in PHP. I currently have this code that combines JS / HTML Quote: <html> <head> <script language="JavaScript"> function lancement() { a = setTimeout("affiche(1)",100); } function stopAll() { frame1.stop(); frame2.stop(); frame3.stop(); frame4.stop(); frame5.stop(); } function affiche(i) { if (i==1) { frame1.location.href="http://"; frame2.location.href="http://"; frame3.location.href="http://"; frame4.location.href="http://"; frame5.location.href="http://"; a = setTimeout("stopAll()",1290); a = setTimeout("affiche(2)",1300); } else if (i==2) { frame1.location.href="http://"; frame2.location.href="http://"; frame3.location.href="http://"; frame4.location.href="http://"; frame5.location.href="http://"; a = setTimeout("stopAll()",1290); a = setTimeout("affiche(3)",1300); } else if (i==3) { frame1.location.href="http://"; frame2.location.href="http://"; frame3.location.href="http://"; frame4.location.href="http://"; frame5.location.href="http://"; a = setTimeout("stopAll()",1290); a = setTimeout("affiche(4)",1300); } else if (i==4) { frame1.location.href="http://"; frame2.location.href="http://"; frame3.location.href="http://"; frame4.location.href="http://"; frame5.location.href="http://"; a = setTimeout("stopAll()",1290); a = setTimeout("fin()",1300); } } function afficheFin() { frame1.location.href="http://"; frame2.location.href="http://"; frame3.location.href="http://"; frame4.location.href="http://"; frame5.location.href="http://"; } function fin() { afficheFin(); } </script> </head> <body onload="lancement()"> <iframe name=frame1 src="" width="600" height="600" frameborder="0" border="0" scrolling="no"></iframe><br> <iframe name=frame2 src="" width="600" height="600" frameborder="0" border="0" scrolling="no"></iframe><br> <iframe name=frame3 src="" width="600" height="600" frameborder="0" border="0" scrolling="no"></iframe><br> <iframe name=frame4 src="" width="600" height="600" frameborder="0" border="0" scrolling="no"></iframe><br> <iframe name=frame5 src="" width="600" height="600" frameborder="0" border="0" scrolling="no"></iframe><br> </table> </html> </body> The problem with this script is that it is too complicated I think. I wish I actually have a script like PHP, but that read variables from a text file for example I can put: $url1="website" $w="600" $h="600" $timer="8" (in seconds, not milliseconds) I do not know if I am very clear, in fact it is a friend who gave me the script on a html page, it allows me to do the rotations of urls to promote my sites In fact I wish I could add as much iframe on my page or at least 5 iframes. And each iframe is controlled by a document, I do not know if it's really possible, I have little knowledge, and my friend can not make me. I wanted to find a good solution, all the scripts I found are not suitable, it involves images or banners. And it's too complicated to put the time in milliseconds and I find having to change the entire page at a time There are just some questions I ask myself, is it possible thereafter to include a module for this kind of script in order to limit the display by IP address of the person? For example if Michael has the IP 192.168.0.1, there's way to record that he saw $url3 and $url5 already, and to display the URLs that it has not seen it yet? Of course by putting in the file, whether or not to display per IP per 24 hours If anyone can help me, thank you. Even if someone can offer me an interesting solution I am willing to pay, I do not have much, but I think it will make you happy anyway (I'm also looking for a true freelance php coder - no warez/nulled script - with 50% increase in my earnings every month for him, if he makes the scripts) Bye Hello, I have recently been working on a website which will have rotating background images. I have found a useful javascript code (i don't know who the author is) which rotates different background images neatly after x milliseconds. here is the code: ==== <script language="JavaScript1.2"> var bgimages=new Array() bgimages[0]="../gfx/bgs/bg1.jpg" bgimages[1]="../gfx/bgs/bg2.jpg" //preload images var pathToImg=new Array() for (i=0;i<bgimages.length;i++){ pathToImg[i]=new Image() pathToImg[i].src=bgimages[i] } var inc=-1 function bgSlide(){ if (inc<bgimages.length-1) inc++ else inc=0 document.body.background=pathToImg[inc].src } if (document.all||document.getElementById) window.onload=new Function('setInterval("bgSlide()",6000)') </script> ==== The script works, and the background images rotate. However, currently the rotation of the images have no effect. I would like to add the effect of the images blending into each other when they rotate. How would this be possible? Thanks a bunch! -Captainel I have added an image rotator to my website using Java Script. The box for the rotator shows up on the published site but not the pictures. When I click on the box it links to the pictures I have added, and I know they are rotating because it changes every time I click on it. Also, the code does not seem to be showing up when I view the source of the page. This is a link to my site: http://www.jenniferbrenn.com/Fashion/Home.html the problem is in the box beneath the name "Jenny" near the bottom of the page. This is the code I am using: [CODE] <script language="JavaScript"> // Copyright 1996, Infohiway, Inc. (http://www.infohiway.com) // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/ <!-- function adArray() { for (i=0; i*2<adArray.arguments.length; i++) { this[i] = new Object(); this[i].src = adArray.arguments[i*2]; this[i].href = adArray.arguments[i*2+1]; } this.length = i; } function getAdNum() { dat = new Date(); dat = (dat.getTime()+"").charAt(8); if (dat.length == 1) ad_num = dat%ads.length; else ad_num = 0; return ad_num; } var ads = new adArray( "images/banner_1.gif","http://web.me.com/jim.stevenson/Fashion/Media/bee_vogue.jpg", "images/banner_2.gif","http://www.superficialdiva.com/wp-content/uploads/2009/01/hana-soukupova-vogue-belleza-february-2009-magazine-cover.jpg", "images/banner_3.gif","http://bp3.blogger.com/_maRo3z-KVqA/R9IKSDQPIwI/AAAAAAAAB4g/ghZysBSq-9M/s400/Victoria-Beckham-Vogue.jpg"); var ad_num = getAdNum(); document.write('<CENTER><TABLE CELLPADDING=0 CELLSPACING=1 BORDER=0><TR><TD ' +'ALIGN=CENTER><FONT SIZE=2 FACE=Arial><B>Jenny ' +'</FONT></TD><TR></TR><TD><A HREF="'+ads[ad_num].href+'"><IMG SRC="'+ads[ad_num].src+'" ' +'WIDTH="240" HEIGHT="320" BORDER=0 name=js_ad></A></TD></TR></TABLE></CENTER>'); link_num = document.links.length-1; function rotateSponsor() { if (document.images) { ad_num = (ad_num+1)%ads.length; document.js_ad.src = ads[ad_num].src; document.links[link_num].href = ads[ad_num].href; setTimeout("rotateSponsor()",5000); } } setTimeout("rotateSponsor()",5000); // --> </script> [CODE] 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>
Can someone help me get my frontpage image rotator working and my lightbox for my product images? I'd appreciate any help. Respectfully, LMW1 I have a banner ad with an image rotation embedded in a DIV. It works quite fine, but doesn't have required SEO info, ie: alt text. Here is the code that is working. Code: <div style="background-image: url(http://www.earthwindwater.com.au/banners/skiracersworld/banner-bg.png);height:148px;width:982px;border:0px;">
<div style="float:left;height:148px;border:0px;">
<a href="http://www.earthwindwater.com.au" target="_blank"><img border=0 align="absmiddle" alt="Earth Wind and Water Sports Action Cameras" src="http://www.earthwindwater.com.au/banners/skiracersworld/EWW-logo.png" /></a>
</div>
<div style="height:148px;border:0px;float:right;padding-right:415px; ">
<a id="imageurl" target="_blank" ><img id="Rotating1" border="0"></img></a>
<script language="JavaScript">
function RotateImages(Start)
{
var a = new Array("http://www.earthwindwater.com.au/banners/skiracersworld/Contour+.png","http://www.earthwindwater.com.au/banners/skiracersworld/LiquidImage.png","http://www.earthwindwater.com.au/banners/skiracersworld/ContourGPS.png", "http://www.earthwindwater.com.au/banners/skiracersworld/GoPro.png");
var c = new Array("http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contour", "http://www.earthwindwater.com.au/store/cameras/hd-cameras/impact-series-720p-mx-goggle-red", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contourgps", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/gopro-hd-motorsports-hero");
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) + ")",5000);
}
RotateImages(0);
</script>
</div>
</div>
Now, I thought I would modify the code a little and include "Image Title" and "ALT Text" I am not much of a scripting genius, therefore my modifications don't work. Here is my modified code Code: <div style="background-image: url(http://www.earthwindwater.com.au/banners/skiracersworld/banner-bg.png);height:148px;width:982px;border:0px;">
<div style="float:left;height:148px;border:0px;">
<a href="http://www.earthwindwater.com.au" target="_blank"><img border=0 align="absmiddle" alt="Earth Wind and Water Sports Action Cameras" src="http://www.earthwindwater.com.au/banners/skiracersworld/EWW-logo.png" /></a>
</div>
<div style="height:148px;border:0px;float:right;padding-right:415px; ">
<a id="imageurl" target="_blank" ><img id="Rotating1" id="imagealt" id="imagetitle" border="0"></img></a>
<script language="JavaScript">
function RotateImages(Start)
{
var a = new Array("http://www.earthwindwater.com.au/banners/skiracersworld/Contour+.png","http://www.earthwindwater.com.au/banners/skiracersworld/LiquidImage.png","http://www.earthwindwater.com.au/banners/skiracersworld/ContourGPS.png", "http://www.earthwindwater.com.au/banners/skiracersworld/GoProHDHERO2.png");
var c = new Array("http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contour", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/impact-series-hd-1080p-mx-video-goggle-white", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/contourgps", "http://www.earthwindwater.com.au/store/cameras/full-hd-cameras/gopro-hd-hero2-motorsports-edition");
var e = new Array("Contour+", "Impact Series HD 1080p MX Video Goggle", "ContourGPS", "GoPro HD HERO2 Motorsport Edition");
var g = new Array("Contour+", "Impact Series HD 1080p MX Video Goggle", "ContourGPS", "GoPro HD HERO2 Motorsport Edition");
var b = document.getElementById('Rotating1');
var d = document.getElementById('imageurl');
var f = document.getElementById('imagealt');
var h = document.getElementById('imagetitle');
if(Start>=a.length)
Start=0;
b.src = a[Start];
d.href = c[Start];
f.alt = e[Start];
h.title = g[Start];
window.setTimeout("RotateImages(" + (Start+1) + ")",5000);
}
RotateImages(0);
</script>
</div>
</div>
Any ideas how I can get this to work I just need something that rotates/slides a few images when a page loads. I'd guess Jquery would work best? But it needs to work in all browsers, and I have read some horror stories about ones that don't. Any good recommendations?
I recently uploaded my site from locally to a remote host. After uploading I noticed my ad block detection system stopped working as well as my banner rotation script. First off, I used the banner rotation script shown demo'd he http://labs.beacon9.ca/bannerRotator/ Now if you look at the source of that page you can see how the javascript works by including the BannerRotator.js. On my website, I stuck the jQuery "module" in a folder called "simple" and went from that route. If you look on my site: http://www.flex-essentials.com you can see that on the home page there is a large grey box where the banner rotator script should be, but is not. I'm using this "ready" function by jquery to load some things: Code: $(document).ready(function($) {
bannerRotator('#bannerRotator', 500, 5000, true);
$('a[rel*=facebox]').facebox();
if ($("#advert").height() == "0" || $("#advert").css("display") == "none"){//enabled
$("#lolaa").css("display", "block");
$("#lolaa").css("height", "90px");
}
else if($("#advert").height() != "0" || $("#advert").css("display") != "none"){//disabled
$("#lolaa").css("height", "0");
$("#lolaa").css("display", "none");
}
if($("#BodyAd").height() == "0" || $("#BodyAd").css("display") == "none"){//enabled
$("#wtlt_cube").css("display", "block");
$("#wtlt_cube").css("height", "213px");
}
else if($("#BodyAd").height() != "0" || $("#BodyAd").css("display") != "none"){//disabled
$("#wtlt_cube").css("height", "0");
$("#wtlt_cube").css("display", "none");
}
});
But for some reason, the only javascript code that is working is the "facebox" module. Please help me figure out why this javascript isnt loading. Thanks! Hey guys my 2nd thread on this forum requesting help ok so last month i edited this cool banner rotator and got it doing exactly what i wanted. but i need some help adding a bit more functionality to it and maybe improoving the code. would any1 be kind enough to help me out? can link codes etc just ask. Thanking you :P |
|||||||