Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
New Coder
Join Date: Jan 2012
Posts: 10
Thanks: 2
Thanked 0 Times in 0 Posts
Need help with an img rotator script
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
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).
Last edited by aaronrusso; 01-10-2012 at 05:17 PM ..
Reason: Added Info
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 02:04 AM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
