Page 1 of 5 123 ... LastLast
Results 1 to 10 of 43

Thread: Image Slideshow with TEXT Issue

  1. #1
    Join Date
    Sep 2009
    Posts
    33
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Exclamation Image Slideshow with TEXT Issue

    I made a sample page for reference. I have been desperately trying to get this code to work properly with text for weeks now and Ive got nothing. The page can be found here:

    http://staging-40.pw.utc.com/pw1000g/slider_test.html

    The image rotator works GREAT and has responsive controls that work perfectly with the transitions. What I am trying to do however is add simple text with CSS elements OVER the images and have them transition WITH the images. I thought by adding a <span> or <div> tag into the html I could simply just include them, but that wasnt the case as it doesnt show up (view source to see the sample text in the code, however it doesnt show up on the page). I am not sure why this is the case, and I need help making it appear.

    Here is the first JS the page references called 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}});
    And here is the second called "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});
    Does anyone have ANY ideas why the text isnt working?? Im thinking something in the JS isnt allowing the text to display, because why wouldnt it display if put directly into the page? Please help! THANKS!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    On their demo page, if you look at the source code, the descriptions are the title attributes of the images. Try that. For example, instead of:

    Code:
    <div><img src="images/backgrounds/test1.jpg" alt="test1" id="wows0"/><span style="z-index:101;">THIS IS TEXT</span></div>
    do like:

    Code:
    <div><img src="images/backgrounds/test1.jpg" alt="test1" id="wows0" title="THIS IS TEXT"/></div>
    OK, that works but you also have to edit the scripts/wow_script.js file. At the very end it has:

    Code:
     . . . ets:true,caption:false,controls:true});
    Change that to true:

    Code:
     . . . ets:true,caption:true,controls:true});
    And at that point you probably want to edit the styles here:

    Code:
    #wowslider-container1 .ws-title{
    	position: absolute;
    	bottom:7%;
    	left: 0;
    	margin-right:5px;
    	z-index: 50;
    	background: none;
        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;
    }
    Those will allow you to style and position the captions.
    Last edited by jscheuer1; 01-12-2012 at 08:54 PM. Reason: add - OK, that works . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2009
    Posts
    33
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    I did try that but it adds a sliding effect from the bottom left side. I want the text to fade in just like the image does at exactly the same time the image does and have the text be at four separate areas within the images. So that means each text piece would also need a set of CSS positions.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It would have saved me quite a bit of time if you had told me that part about the title attribute being able to be used as captions. I know it's not what you want exactly, but rather than throw the baby out with the bathwater, adapting it is probably the best way to get what you want. So far I have this:

    http://home.comcast.net/~jscheuer1/s...w_slider_h.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2009
    Posts
    33
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    THats great! Its certainly what I need Just one question though, there is a background to the text. Is that just manageable with CSS and can I move the position of the text to anywhere in the image with CSS styles as well?? If so, how? Thanks again!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I assume you've looked at the source code. The scripts may be made external again and their code minified again if you like, though minifying it won't save much in bytes and might cause an error to creep in.

    To answer your question, yes. Here at the end of the style section:

    Code:
    #wowslider-container1 .ws-title{
    	position: absolute !important;
    	top:20px !important;
    	right: 0 !important;
    	left: auto !important;
    	display: block !important;
    	margin: 0 0 0 5px !important;
    	z-index: 50;
    	background: #444;
        color: #eee;
    border-radius: 11px 0 0 11px;
    	padding: 10px;
    	font-size: 19px;
    	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    	text-shadow: 1px 1px 0 #000;
        opacity: 0.7;    
    	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    }
    
    #wowslider-container1 .ws-title div{
    	padding-top:5px;
    	font-size: 13px;
    }
    The highlighted properties probably need the !important keyword as shown to override what the script might otherwise try to do with the element, although I commented some or all of that out of the code later. You could experiment. The red lines do virtually nothing, or nothing at all and should probably be removed because the script controls the opacity.

    And the only bits that affect it are all that stuff under the #wowslider-container1 .ws-title selector. This section:

    Code:
    #wowslider-container1 .ws-title div{
    	padding-top:5px;
    	font-size: 13px;
    }
    does nothing unless you have a caption that is added to all captions (a sort of title for the entire slider), and I haven't figured out how to get that yet anyway.

    However there is an inner element, a span which contains only the text that could be styled using this selector:

    Code:
    #wowslider-container1 .ws-title span {
    	padding-top:5px;
    	font-size: 13px;
    }
    But I'd use different rules than those if I bothered to style it at all. It's an inline element, so for some styles to work with it, it would have to be given display: block;

    Certain things from the #wowslider-container1 .ws-title selector would still be inherited of course, just like in any ordinary situation. The generated markup looks like so:

    HTML Code:
    <div class="ws-title">
    <span>SOME TEXT</span>
    </div>

    One other thing, find this line in the top script:

    Code:
    f.css({opacity:0}).animate({opacity:1}, b.captionDuration, 'linear', function(){if(g.browser.msie && g.browser.version<7){f.get(0).style.removeAttribute("filter")}});
    It basically controls the effect. I think it should probably be:

    Code:
    f.css({opacity:0}).animate({opacity:1}, b.captionDuration, 'linear', function(){if(g.browser.msie && g.browser.version<9){f.get(0).style.removeAttribute("filter")}});
    Becuase for IE, I only tested in 9 and I think it renders all lesser versions opacity as native to 9, so I goofed up there.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    aaronrusso (01-13-2012)

  8. #7
    Join Date
    Sep 2009
    Posts
    33
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    AMAZING! Thank you so much. I apologize for earlier when I forgot to mention the bit about the caption. You've been extremely helpful! Ive been trying to get this working the way I wanted for over a week now! This certainly allows me to add four different text areas to each image and have them fade with the image. Great!! Thanks again ^_^

  9. #8
    Join Date
    Sep 2009
    Posts
    33
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    I just hit a snag. Im not sure how to code the CSS to make the text appear in four separate areas. For instance, the css currently (on your example) has it appearing at the upper-right corner. Everything works fine with this of course. However, what if I wanted each text line (for each different image) appearing in four different areas, how do I go about doing that? So the first image would have text appear in the upper left corner, the second images has text appearing in the bottom left corner, etc etc. Thanks

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Find this line:

    Code:
    f.css({opacity:0}).animate({opacity:1}, b.captionDuration, 'linear', function(){if(g.browser.msie && g.browser.version<9){f.get(0).style.removeAttribute("filter")}});
    or this line (I forget which version you have now):

    Code:
    f.css({opacity:0}).animate({opacity:1}, b.captionDuration, 'linear', function(){if(g.browser.msie && g.browser.version<7){f.get(0).style.removeAttribute("filter")}});
    Whichever you have, you'll only have one or the other. Replace it with these two lines:

    Code:
    f.get(0).className = 'ws-title ws-title' + a;
    f.css({opacity:0}).animate({opacity:1}, b.captionDuration, 'linear', function(){if(g.browser.msie && g.browser.version<9){f.get(0).style.removeAttribute("filter")}});
    That now allows you to add to the stylesheet after the block that defines the ws-title styles, things like for example:

    Code:
    #wowslider-container1 .ws-title{
    	position: absolute !important;
    	top:20px !important;
    	right: 0 !important;
    	left: auto !important;
    	display: block !important;
    	margin: 0 0 0 5px !important;
    	z-index: 50;
    	background: #444;
    	color: #eee;
    	border-radius: 11px 0 0 11px;
    	padding: 10px;
    	font-size: 19px;
    	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    	text-shadow: 1px 1px 0 #000;
    }
    
    #wowslider-container1 .ws-title.ws-title1{
    	top: auto !important;
    	right: auto !important;
    	left: 0 !important;
    	bottom: 50px !important;
    	margin: 0 5px 0 0 !important;
    	border-radius: 0 11px 11px 0;
    }
    See the added .ws-title1

    That tells it to use these styles to override the others for the image at 0 based index 1, or the second image.

    You can add others for the others. I assume the first image would be the defaults as set in the #wowslider-container1 .ws-title selector. The next image (the second image) would be as shown highlighted above, using the number 1, the third image would use the number 2 and so on.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #10
    Join Date
    Sep 2009
    Posts
    33
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Default

    I think I get it, that seems straight forward enough. So youre saying it goes by number of images within that container div, not by an image with the class "ws-title1, ws-title2, ws-title3" etc? Right now the code after the body tag doesnt have any classes with that, its just the "wowslider-container1", so this would position them automatically?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •