Add a Text overlay to this slideshow from a <p> tag using jquery -
i have slideshow , want each image have headline , description overlay image , fade in , out images it...
i think have copy sol variable on each instance used
//sol = document.getelementbyid('slidy').getelementsbytagname('img') //var sho = document.getelementbyid('slidya').getelementsbytagname('a'); but trying see if there way call both the:'a' , 'p' tags without adding whole mess of code
for instance here want html like
<div id="slidy" class="slidepart fl"> <img width="100%" src="/img/1.jpg"> <p>here text...</p> <img width="100%" src="/img/2.jpg"> <p>here somemore text...</p> <img width="100%" src="/img/3.jpg"> <p>even more text...</p> <img width="100%" src="/img/4.jpg"> <p>one more time text...</p> <img width="100%" src="/img/5.jpg"> <p>finally, text...</p> <div class="sl_paginationpart"> below have >>>>>>>>>>>>>>>>>
html:
<div class="slidecontainer"> <div class="slides"> <div class="contents" style="width:100%; margin:0px auto; overflow:hidden;"> <div id="slidy" class="slidepart fl"> <img width="100%" src="/img/1.jpg"> <img width="100%" src="/img/2.jpg"> <img width="100%" src="/img/3.jpg"> <img width="100%" src="/img/4.jpg"> <img width="100%" src="/img/5.jpg"> <div class="sl_paginationpart"> <ul id="slidya" class="slpagination"> <li><a href="javascript: prevnext(0);" class="prev"></a></li> <li><a href="javascript: thisisit(0)" class="number select">1</a></li> <li><a href="javascript: thisisit(1)" class="number ">2</a></li> <li><a href="javascript: thisisit(2)" class="number ">3</a></li> <li><a href="javascript: thisisit(3)" class="number ">4</a></li> <li><a href="javascript: thisisit(4)" class="number ">5</a></li> <li><a href="javascript: prevnext(1);" class="next"></a></li> </ul> </div> </div> </div> </div> </div> css:
/* ------------------------ start slider features ---------------------------- */ .fl{ float:left;} .slidepart{ width:100%; height:320px; overflow:hidden; position:relative;} .slidepart img{position:absolute; width:100% } .slidepart p{position:absolute;height: 100%; opacity: .5%; } .sl_paginationpart{ background:url(/../img/slide_paginationbg.png) no-repeat left; width:auto; height:15px; display:block; position:absolute; right:0%; top:5%; padding:6px;} ul.slpagination{ margin:0px; padding:0px; list-style:none; font-family:arial; } ul.slpagination li{ margin:0px; padding:0px; list-style:none; float:left; } ul.slpagination li a.prev{background:url(/../img/sl_prev.png) no-repeat; width:14px; height:15px; display:block; margin-top: 2px;} ul.slpagination li a.next{background:url(/../img/sl_next.png) no-repeat; width:14px; height:15px; display:block; margin-top: 2px; } ul.slpagination li a.number{background:url(/../img/sl_nobg.png) no-repeat; width:18px; height:18px ; display:block; text-align:center; margin:0px 3px; font-size:12px; font-weight:bold; color:#fff; text-decoration:none; text-indent: -1px; } ul.slpagination li a.select{background:url(/../img/select_sl.png) no-repeat;color:#fff; } /* ------------------------ end slider features ---------------------------- */ the javascript
<script type="text/javascript"> var slo=null; var sola = array(); var prev = 0; var cur = 1; var timi=null $(document).ready(function() { sol = document.getelementbyid('slidy').getelementsbytagname('img') var sho = document.getelementbyid('slidya').getelementsbytagname('a'); for(var i=1;i<sho.length-1;i++)sola.push(sho[i]); for(var i=1;i<sol.length;i++)sol[i].style.display = 'none'; for(var i=1;i<solb.length;i++)solb[i].style.display = 'none'; timi = window.setinterval('doslide()',3000); }) function doslide() { $(sol[prev]).fadeout(500); $(sol[cur]).fadein(1000); sola[prev].classname = 'number' sola[cur].classname = 'number select' prev = cur++; if(cur>sol.length-1) { cur=0; prev= sol.length-1; } } function prevnext(mode) { window.clearinterval(timi);timi=null; if(mode) { if(cur>sol.length-1) { cur=0; prev= sol.length-1; } doslide(); } else { cur--; prev--; if(prev<0) { cur=0; prev= sol.length-1; } if(cur<0) { cur=sol.length-1; prev=cur-1 ; } $(sol[cur]).fadeout(500); $(sol[prev]).fadein(500); sola[cur].classname = 'number' sola[prev].classname = 'number select' } timi = window.setinterval('doslide()',2000) } function thisisit(aiyo) { cur = aiyo window.clearinterval(timi);timi=null; $(sol[cur]).fadein(500); $(sol[prev]).fadeout(1000); sola[cur].classname = 'number select' sola[prev].classname = 'number' prev=cur ++cur; if(prev<0)prev = sol.length-1; timi = window.setinterval('doslide()',2000) } </script>
simply switch:
sol = document.getelementbyid('slidy').getelementsbytagname('img')
sol = $(".slide")
then wrap image div class name .slide... may add content need
geez guys (elclanrs, sam tyson, ohgodwhy) thanks, elses script helping , knew there easy fix had brain fart; oh well, please nicer comments next time, forum not expert forum.
Comments
Post a Comment