PDA

View Full Version : Image Slideshow with TEXT Issue



aaronrusso
01-12-2012, 06:29 PM
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:


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);re turn 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,stopOnHov er: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":


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);re turn 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:tr ue});

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!

jscheuer1
01-12-2012, 08:16 PM
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:


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

do like:


<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:


. . . ets:true,caption:false,controls:true});

Change that to true:


. . . ets:true,caption:true,controls:true});

And at that point you probably want to edit the styles here:


#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.

aaronrusso
01-12-2012, 08:21 PM
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.

jscheuer1
01-13-2012, 03:41 PM
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/side/files/wow_slider_h.htm

aaronrusso
01-13-2012, 03:45 PM
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!

jscheuer1
01-13-2012, 04:56 PM
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:


#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:


#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:


#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:


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


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


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:


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.

aaronrusso
01-13-2012, 05:00 PM
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 ^_^

aaronrusso
01-16-2012, 02:18 PM
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

jscheuer1
01-16-2012, 06:59 PM
Find this line:


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):


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:


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:


#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.

aaronrusso
01-16-2012, 07:09 PM
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?

jscheuer1
01-16-2012, 07:35 PM
Yes. The ws-title (and some other classes) are added by the script. Now we're adding one more. Each time it transitions, the ws-title div, which was created entirely by the script in the first place is given an added class:

ws-title0 - for the first image
ws-title1 - for the second
ws-title2 - for the third

and so on.

BTW, I was playing with the code a lot over the weekend. We don't need the !important keyword in its styles (if you're you using the version I gave you, you still do, at least for display), and I've added in more optional effects:

'fade', 'squares', 'blur', 'stack', 'basic', 'ken_burns', 'stack_vertical'

I hope to add some of the curtain or slice transitions. They're a pain, because like squares they use another script. Squares uses the coin slider code. The various slicing effects would use jqFancyTransitions code by the same author as coin slider, so it shouldn't be too hard to follow that template. They all use the same slider code as well though which I'm rewriting and renaming the Oh My God Slider or OMG Slider for short. Working title at least.

I've also added in this latest revision and made the method of caption appearance optional, it can fade in like we've been doing it or slide in like it did before. When it slides, the direction it slides from is configurable (up, down, left, right) for all or for each, and the optional position via css is valid for both fade and slide.

Let me know if you're interested in the OMG version.

BTW - The version of Wow Slider you had when this all started is not their official version. Where did you get it?

aaronrusso
01-16-2012, 07:41 PM
That sounds amazing! And thanks for the clarification and help over the last few days. You've been great! I wouldnt mind that new script you worked on too, I can use it for other projects in the future. Thanks again!

jscheuer1
01-16-2012, 09:19 PM
Before I release it, I'd like to know where you got the code you first had when this started. It's not the current official version. If there's no open source or similar license, I really cannot publish it. Not in its current form.

aaronrusso
01-16-2012, 09:36 PM
Its not open-source as far as I know. Its code produced from the "Wowslider" program that I needed to adjust because even when you pay for it (which I did), it doesnt give nearly enough options to do what i wanted it to do. If you can't publish it thats ok. I still appreciate the help.

Regardless, I also have one last question to make the CSS more adjustable.

In the BODY code, where the images are, is it possible to tell the script to allow a "span" tag between the image DIVS so I can put two separate text areas with separate positions for each image (for example, like a title and a description for each images rotating with each image like we have it now)?

So the code would look something like this:


<div id="wowslider-container1">
<div class="ws_images">
<div><img src="images/backgrounds/test1.jpg" alt="test1" id="wows0" /><span>THIS IS TEXT TITLE</span><span><span>THIS IS TEXT DESC</span></div>
<div><img src="images/backgrounds/test2.jpg" alt="test2" id="wows1" /><span>THIS IS ALSO TEXT</span></div>
<div><img src="images/backgrounds/test3.jpg" alt="test3" id="wows2" /><span>THIS IS ALSO SOME MORE TEXT</span></div>
<div><img src="images/backgrounds/test4.jpg" alt="test4" id="wows3" /><span>TEXT</span></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>
</div>


I ask this because Id like to be able to control each text area separate and position them separately using in-line CSS, so I can adjust colors, font, etc, on the fly. I tried doing this generally in the CSS using your advice earlier and it doesnt seem to work correctly. At least the function to face the text with the image is working. Ideally though, I wanted the code to fade the images and text together, while allowing adjustable CSS inside and over the image as selectable text (like you finally figured out already). Any ideas? If this isnt possible, thats ok, at least we have it close enough for now. Thanks

jscheuer1
01-16-2012, 11:33 PM
On the source code front I've discovered that the wow slider was probably at one time an official jQuery plugin on the jQuery Plugin Site. As such it was probably under a GNU/GPL license. But the jQuery Plugin Site is down for revamping and I cannot easily confirm that. But I haven't given up, I think I'll try contacting the jQuery folks directly to ask if any of them know the story. If it's true, I can pretty much do whatever I want. And the official Wow site might even be in violation of that license by obfuscating the code and not publishing it under that license, which among other things requires all modifiers to give credit and make their modifications also available under the same license. They can charge for it because they made this whole 'for dummies' software interface for creating the sliders. But the javascript should still be under the same license. If they are owned by the original coder, that might make things a little different, but the code as it was when it was released under GNU/GPL should still be fair game.

Anyways, as to your question - The way it works is that the title of the image is the the main text, then stuff in spans or whatever is subsidiary. But I think the version I gave you left out an important part that prevents the image title from appearing as a tooltip on hover of the image because I didn't understand what it was for. It also obfuscates the image somewhat from copying, I thought that was all it was for. I later put it back in.

In any case you get:


<div class="ws-title">
<span>Whatever was the title attribute of the image</span>
<div>Any HTML code that followed the image in its division</div>
</div>

So, are you saying you want to split that up and have some of it show up in one place and some of it show up in another?

We could have the script make another div with a class of ws-text and have the HTML go there and only the title attribute go to the ws-title div.

When I have more time, I'll look into that. But let me know if that's what you're really after.

aaronrusso
01-16-2012, 11:47 PM
Sure thing. Ok, let me see if I can describe exactly what I am looking for (and dont take that the wrong way, because youve been beyond helpful and I would have never gotten this far without ya, so thanks ahead of time).

So We have a slider, with the bullet and arrow navigation. THere are four slides (images), each of them are different. Each slide needs to have text (that you can mouse over, highlight, and copy if you wanted to). On each slide, there is a title text (almost like the headline to a story in the newspaper) that is large and has drop shadows and such (that I know how to do via css), and then under the title there is a short, one-paragraph description talking about the "story" (at regular font-size without special decorations). Each "title" and "description" needs to fade with their parent image at the same time.

Because of how certain images are shot and/or cropped, the text for the header and descr needs to sometimes be in different areas (ex: there is a big open sky in the 4th slide so thats where a lot of the text might go, but other slides dont have that). So the positions needs to be able to be controlled (via top, left, right, bottom, etc pixel positions). Also, because some pictures are dark, while others are light, I want to the ability to change the titles and descr separately in css, and I used to do this in other pages via in-line CSS, but if this can be done in other areas I dont mind it. And finally, in case its needed in the future, I might want to add hyperlinks to the text if I needed it.

So, each slide will have its own title, description, and image, which all fade together in proper areas so they can be easily read and copied if needed. That is all.

Thanks again for the help, if you need more information, let me know :)

jscheuer1
01-18-2012, 02:18 AM
OK, hows this:

http://home.comcast.net/~jscheuer1/side/files/sliders/omg_slider_h.htm

I went ahead and published the OMG Slider with the proviso:



/* Notice - Pending further information, you are required to have a Wow Slider License to use this script for commercial purposes.
Personal and non-profit use require a link back to the Official Wow Slider home page */
// Modifications to Script (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use

I'm still looking into whether or not a GNU/GPL license or similar applies to the underlying code used by the Wow folks. But in the meantime I'm pretty sure that notice covers me from any liability.

A lot has changed, any questions, just let me know. Oh and I changed it from endless looping to one loop - easily changed back in the configuration section found at the end of the head section.

aaronrusso
01-18-2012, 07:06 PM
I do like the funny text added, haha, but once again, I am trying to change the styles of the text (i.e. position, size, color, etc) in-line where the text is. I do not want one bit of text inside the image as a "title" and the other outside. Ideally, I want two separate spans or divs I can add between the main div tag for the image and I want to specifically control where the text goes on the image from there, not the css in the header.

I solved this problem using another slideshow script located at http://css-tricks.com/examples/AnythingSlider/ (although this doesnt allow for fading, which I want). I modified the code to allow for text over the image (if the image is placed inside the div as a background, which works for me), but the code is very messy and the text only does about 75% of what I want it to do, not to mention adding shadowing is hard to do.

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

Thats an example of what I have done so far, but it isnt using the right template that the wow slider had (which I love and want to use) and the way the text can be formatted isnt perfect which I need it to be.

I just need something to fade a DIV tag in the BODY of the page. It should fade everything inside that div tag and rotate to the next with no issues. If you can get the WOW slider I originally had to do this, that would be great!

jscheuer1
01-18-2012, 10:09 PM
So you don't want the fade any longer?

Anyways, assuming you still do want the fade, I think you would want some defaults set in the stylesheet. Any or all of these can be overridden with inline styles such as you propose. Here's an example:

http://home.comcast.net/~jscheuer1/side/files/sliders/omg_slider_2_h.htm

I've gotten rid of the bullets markup (you can still use it if you want to but if you don't, the script now makes these for you and/or will overwrite yours if they're aren't enough or they're in the wrong format). Either way, they're still controlled in the stylesheet for appearance in the same way as before.

The selectors have changed a little, I shortened #omgslider-container1 to #omgslider and the #omgslider .omg-html now only sets the defaults for the texts as mentioned above. However, certain styles should be kept there as noted by the /* required */ comments in the stylesheet.

I've only made things a little different for some of the texts. Hopefully it's enough so you can see what to do.

And you can have as many div elements as you want in image divisions. They will each be appended separately using the default styles plus whatever inline styles you have for them, which - again, can override the defaults. You can even nest elements within these nested divisions and style those as well, they will stay with their parents.

aaronrusso
01-19-2012, 01:52 PM
Ill test this today when I can. I appreciate the effort. I did want both the text and the image to fade together btw, I am sorry for the confusion. Thanks again and Ill let you know how it turned out.

aaronrusso
01-19-2012, 03:04 PM
It works perfectly! I just need to adjust the text areas to the position I want it in and Im all set. Thanks a ton for your help :) I havent seen a fading rotator ANYwhere on the net that can do this specifically, so you've been a ton of help.

aaronrusso
01-19-2012, 05:18 PM
Hey the rotator works great, and its exactly what I want, but for some reason the text over the image is showing semi-transparent. I dont mind it fading in, but do you know why its semi-transparent and where to adjust that?

EDIT: In only occurs in FireFox just an FYI, but it shouldnt...

jscheuer1
01-19-2012, 05:47 PM
Yes it 'should' (at least the way it's configured on the page), and it also occurs on any browser other than IE 8 and less. Those IE browsers have difficulties presenting text that's faded. It loses its anti-aliasing qualities and looks tacky. So for them, full opacity must be reached and the filter removed to guarantee legibility. But if you don't like it (the slightly faded endpoint for IE 9 and all other browsers), it's easily changed in the on page config. It's the capMaxOpacity property and it's currently set to 0.6, change it to 1, as I have below and it will be the same as in IE 8 and less:


<script type="text/javascript">
jQuery(function($){
$("#omgslider").omgSlider({
effect : 'fade', // transition effect - 'fade', 'squares', 'blur', 'overlay', 'basic', 'ken_burns', 'vertical_overlay' (default: 'fade')
prev : '',
next : '',
duration : 2000,
delay : 9000,
outWidth : 1032,
outHeight : 500,
width : 1032,
height : 500,
autoPlay : true,
loop : 1, // if autoPlay is true, number of automatic loops before stopping (the default, 0 or false is infinite, use that or a positive integer)
stopOn : 0, // if loop is a positive integer, 0 based index of the image to stop on once the required loops complete (defaults to 0)
stopOnHover : true,
preventCopy : true, // should image be situated such as to make it hard to copy? (also prevents title attribute from appearing as tooltip, defaults to true)
bullets : true,
controls : true,
caption : true, // should title attribute and/or other HTML in each image division be used as caption? (default: true)
captionDuration : 2000, // duration of caption appear effect. disappears at 1/3 this time (defaults to 1000)
captionAppear : 'fade', // should caption 'slide' in or 'fade' in? (defaults to 'fade')
capMaxOpacity : 1,
captionDirection: 'right', // if captionAppear is 'slide', FROM which direction should it slide? ('up', 'down', 'left' or 'right', defaults to 'right')
onCaptionOnly : true, // if set to true only the onCaption function will fire for the caption, no internal script code will be used.
onStep : null, // ex: function(i,p){} // function run as each step begins, before it transitions in (defaults to null). i represents the index you are stepping to, p is the current config object, this is the selector element
onCaption : function(i,p,html,title){ // function run after the caption is written, before it transitions in (defaults to null). i represents the current index, p is the current config object, this is the selector element
var omgObj = this;
if(p.capHTML){
p.capHTML.stop(1,1).fadeOut(p.captionDuration/3, function(){p.capHTML.remove();appear();});
} else { appear(); }
function appear(){
var caps = p.capHTML = jQuery('<div>'+html+'</div>').children();
caps.each(function(){
var cap = $(this).addClass('omg-html').appendTo(omgObj).css({opacity:0,display:'block'})
.animate({opacity:(p.capMaxOpacity||1)},p.captionDuration, 'linear', function(){if(p.ie&&p.ie<9){this.style.removeAttribute("filter")}});
});
}
}
});
});

</script>

Or, perhaps 0.6 was just too light for you. You could try 0.75, or any positive decimal value. I think it looks neat with some of the image showing through.

The browser cache may need to be cleared and/or the page refreshed to see changes.

BTW, I'm just about finished adding the optional jqFancyTransitions of curtain, zipper, and wave.

Also, if you go to production, I'd like to see what the final result is.

aaronrusso
01-19-2012, 05:55 PM
Thanks again, that certainly solved the issue! Now if I can just figure out text-shadow effects that work in both FF and IE id be set ^_^ If you know any good sources for this let me know, I just need to make titles (and sometimes on occasion the descriptions) have a shadow depending on the picture. Youve already done a ton so you dont NEED to do this as Im trying to research this. Thanks again!!

EDIT: Of course Ill show you the final link. Im just trying to design an informational page for an airplane engine. Ill show you when its done. Should be in production in a couple weeks if I can solve the shadow issue Im having. Thanks!

jscheuer1
01-19-2012, 06:15 PM
Starting at least with IE 9, IE does it like all the other browsers. There are however proprietary filters for IE 8 and less. However, these may render the text difficult to read, and they probably would be removed by the same directive that removes the filter for opacity, unless the were applied inline to a child of the nested div*. See:

http://rainbow.arch.scriptmania.com/css/ie_filters_generator.html

and the technical reference:

http://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx

for more information.

Personally, I would live with certain missing effects in IE 8 and less. Those browsers are being used less and less all the time.


*

<div><img src="omg_images/test1.jpg" alt="test1" id="omgs0"/>
<div style="top:20px;right:0;margin:15px;font-size:19px;">
<div style="zoom:1;filter:DropShadow(color=#0000FF,strength=4);height:22px;">THIS IS TEXT</div>
</div><div style="bottom:70px;left:0;margin:15px;"><a target="_blank" href="http://www.dynamicdrive.com/forums/showthread.php?t=66914">What's</a> This?</div></div>

aaronrusso
01-19-2012, 06:22 PM
Thanks! Ill try it out a bit more, but from what I just added I can see the drop shadow when the text is fading in, however when the effect completes, it disappears. It doesnt do anything in FF. Ill get back to you when i dive into it more, but if you have any other recommendations in the meantime, Id appreciate it! Thanks

aaronrusso
01-19-2012, 07:30 PM
Ok everything seems to be working fine for the most part. I got a great bit of code to place inside the divs to make shadow work for both IE and FF (which means it probably works on all the browsers now), however, the ONLY and LAST issue I am having is the shadow for IE. When the text is fading in, I can clearly see that it has shadow to it. When the text is done fading in however and is no longer semi transparent, the shadow just disappears! I dont know why this is doing this. Here is the code I am using:


<div style="filter:progid:DXImageTransform.Microsoft.Shadow(color=black, direction=90, strength=4); text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black; z-index:100; position:absolute; top:5px; left:10px; text-align:left; color:white; font-size:38px; font-weight:400; line-height:130%; font-style:italic; font-family:'Myriad Pro';">

The "filter" part allows IE to show shadow, and the "text-shadow" part allows for Firefox. It seems like a lot, but they work fine together in-line. The rest is just positioning and decoration/style for the text. Any ideas why the shadow disappears though once its done fading in?

aaronrusso
01-19-2012, 08:38 PM
NEVERMIND! I solved that one too ^_^ Ill show you the finished result shortly. Thanks for ALL the help!

jscheuer1
01-20-2012, 09:31 AM
Great! did you do something like:


<div><img src="omg_images/test1.jpg" alt="test1" id="omgs0"/><div style="text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black; z-index:100; position:absolute; top:5px; left:10px; text-align:left; color:white; font-size:38px; font-weight:400; line-height:130%; font-style:italic; font-family:'Myriad Pro',verdana,helvetica,arial,sans-serif;"><!--[if IE]><div style="filter:progid:DXImageTransform.Microsoft.Shadow(color=black, direction=90, strength=4);zoom:1;"><![endif]-->THIS IS TEXT<!--[if IE]></div><![endif]--></div><div style="bottom:70px;left:0;margin:15px;"><a target="_blank" href="http://www.dynamicdrive.com/forums/showthread.php?t=66914">What's</a> This?</div></div>

That worked here. But If I were to do that style, or even just that text shadow part of it more than once on a page, I'd use a stylesheet.

aaronrusso
01-20-2012, 05:03 PM
Actually yea I did do something like that, except I added the IE style as a class and just referenced it. The issue I am having (which isnt really a HUGE issue) is that EVERYTHING looks perfect in FF, Chrome, etc, but when the shadow is displayed in IE, it looks blocky, and isnt that beautiful blurred effect that shows on FireFox (and I wish it was). That being said, unless you have another solution for this, I guess I just gotta adjust the IE shadow settings and get it as close to "perfect" as possible.

Heres the reference. Its not done yet, but its close:

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

The finished version is going to look cleaner behind the scenes.

NOTE: Also if you check out the test page I made, notice on the last slide (the one with the black background) that it becomes all blocky and distorted in IE ONLY when its transitioning, and then shows the full picture as normal when the fade is done. Im not sure why it does that...

jscheuer1
01-20-2012, 06:21 PM
First off, I was wrong about IE 9 being able to do it like other browsers. At least it looks like it doesn't/can't in local tests I performed. That's a shame because, as you've seen, the text-shadow property looks so much better than the IE filter. IE 9 now does border-radius and opacity without filters, so I'm a little surprised it requires a filter to do text shadow.

Now here's the real kicker. Starting in IE 7, any filter applied to any element that has text in it will cause that text to lose its anti-aliasing quality (called Clear Type in IE speak). There's no way to get it back except by removing the filter. The script does this for the alpha opacity fading filter. But if we remove the filter for the Shadow, we will also lose the effect. Bold text makes this issue less noticeable. You really can see it on the smaller font normal weight texts, and to a lesser extent, but more than on the bold weight text, on the symbol.

The best thing I can think of for that would be to simply not use the Shadow filter.

But you could make the smaller text one pixel smaller in size and bold it, that would help. And, increasing the strength of the filter or changing its other attributes around should get it to look more like what you're after with the text-shadow property. Come to think of it, the glow filter might be a closer match. For this you would want a separate IE only stylesheet. Get rid of the reference to the filter in the existing stylesheet and add this stylesheet to the page:


<!--[if IE]>
<style type="text/css">
div.shadow_filter{
filter: progid:DXImageTransform.Microsoft.Glow(color=#444444, strength=13);
font-weight: bold !important;
}
</style>
<![endif]-->

Still not ideal, but I think it's a lot better.

Now I couldn't see the blotchiness you're talking about, so I'm not sure what if anything I can say about it. It might have something to do with there being two filters on the text (fade and shadow) until it has transitioned in. In IE 9, it llooks real bad, there's a black background to the text on all slides until it fades in.

jscheuer1
01-20-2012, 06:40 PM
I'd skip the filter entirely for IE, give the text some background color. Or make the color a contrasting color for each slide. White or off white is good for the dark ones, you need something else for the lighter ones. Also the font "Myriad Pro" isn't widely supported, you need a fallback, like san-serif. Otherwise you get Times New Roman as a fallback.

aaronrusso
01-23-2012, 07:03 PM
Thanks for the help! It actually looked a bit strange bold and with that much strength so I reduced it, but then when I saved it the fade effect went away for JUST the text. When I removed the "important!" tag in the css, the transition went again as normal, and with the reduced strength in the glow it looks great (or as good as it can be for IE). Like I said before, it looks PERFECT on Firefox already, so I think if Im showing it off that will be the platform of choice.

I think Ive done as much as I can with this project, and I appreciate your help!! Let me know if you need anything or if you wanna see any result! Thanks again!

jscheuer1
01-23-2012, 07:13 PM
Have you tested it in IE 9? What you had before was truly unacceptable in that browser. And anything that involves a filter on text that is also being faded in IE 9 would probably be the same.

aaronrusso
01-23-2012, 07:17 PM
I dont have access to IE9 believe it or not. If you do feel free to check it for me if you'd like. Its the same link from before.

jscheuer1
01-23-2012, 08:59 PM
It's bad. What happens is, as it's "fading in" it doesn't really fade in, but while it would be doing that, the text has a black block background. Once it's finished "fading in", it looks the same as in other versions of IE.

I really don't like this effect for IE. I think for IE it would be better to have the text simply be a contrasting color (best if it can be arranged) or be against a light colored, perhaps even semi-opaque background.

You can have a background (highlighted):


<div style="position:absolute;width:auto;height:auto">
<div class="bgpanel" style-"position:absolute;width:100%;height:100%;background-color:gray;"></div>
<div class="fgpanel" style:position:relative;">Content</div>
</div>

That has a filter alpha opacity or css opacity (depending upon IE version) associated with it via it's class without dimming the foreground text. Overall positioning is determined by the container, which in this case could be the omg-html class.

I've been doing this and it works out well in IE 9 and other browsers. I'm still trying to figure out how to do it for lesser IE versions. Haven't tried the obvious though, using the alpha(opacity) filter. That's next on that front. I was just looking into open source versions of the "Ken Burns" effect . . .

Also, since the Wow Slider code might be proprietary, I'm currently experimenting with the Nivo slider, which is GNU/GPL and free for all uses. It's a lot like Wow, so most of what I did to Wow I've already added to it. Everything you are using. I think the Wow javascript code is open source too and am in communication with their support people, but it's like pulling teeth getting them to admit it. They have admitted that a number of their effects are open source.

aaronrusso
01-24-2012, 02:11 PM
This didnt seem to work on my end. Is there a "glow" style that can be added to work in IE9? Because that seemed to work very well in the browsers I am testing in now. Also again, it works perfectly in FF.

jscheuer1
01-24-2012, 03:39 PM
Glow is an IE 9 filter, it just doesn't work properly when combined with opacity.

And I think I see what you mean in IE 8 and less the text was black until the background faded in, right?

It had been fine in IE 9 IE 8 mode, but when I tested it on my virtual machine in the real IE 8, that's what happened.

So we're back to contrasting colors - still my favorite idea if it can be worked out, as any IE browser can do that, and the css isn't that different and can be in a conditional stylesheet and it requires no additional markup.

But if you really like Glow in IE 8 and less, you can do that for those browsers and either contrasting colors or the nested semi-opaque background for IE 9. Hopefully by IE 10 they will support the text-shadow property.

About the nested semi-opaque background, I'm not sure I explained it correctly. Here's the actual css I'm using:


<style type="text/css">
.nivo-inline {
position: absolute;
display: none;
top: 7%;
left: 0;
padding: 5px 9px 7px 5px;
color: #ddd;
background-color: transparent;
z-index: 50;
font: bold 14px verdana, helvetica, arial, sans-serif;
}
.nivo-inline .bgpanel {
background-color: yellow;
width: 100%;
height: 100%;
border-radius: 0 11px 11px 0;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
.nivo-inline .fgpanel {
background-color: transparent;
position: relative;
top: 0;
left: 0;
}

</style>

and the markup for that image:


<div><img src="images/toystory.jpg" alt=""/><div><div class="bgpanel"></div><div class="fgpanel">This Mess Things Up?</div></div></div>

The script gives the highlighted div a class of nivo-inline, but as with our version using omg-html class, it's styles may be overridden in part by inline style.

But as I say, this works in all browsers except IE 8 and less. For them you can do:


<!--[if lt IE 9]>
<style type="text/css">
.nivo-inline .bgpanel {
background-color: transparent;
}
.nivo-inline .fgpanel {
filter: progid:DXImageTransform.Microsoft.Glow(color=#444444, strength=5);
}

</style>
<![endif]-->

You could even make the first style block conditional to IE 9 and let all others use the text-shadow property.

But it's quite complex at that point.

aaronrusso
01-26-2012, 06:59 PM
Im still not sure what this is trying to do. Can you link an example please? Im still researching some better ways. I dont mind putting the in-line style "text-shadow" in for all other browsers, as messy as it is, because it looks so good on everything but IE. So far its just the all-mighty microsoft's browser issue.

aaronrusso
01-26-2012, 07:20 PM
Not sure how to adjust the shadows in here, is there a way to adjust the CSS so this example works?

http://kilianvalkhof.com/uploads/ieshadow.html

Or would you not recommend it? Here is my example so far (working in FF and everything else but IE). I used your example above and it didnt work well, so I changed it back (just for reference, but I did try it)

http://staging-40.pw.utc.com/pw1000g/index4.html] (http://staging-40.pw.utc.com/pw1000g/index4.html)

Thanks!

jscheuer1
01-28-2012, 05:30 PM
Put up my example again on a separate page. I think it can be tweaked. That is if you're willing to live with it like so:

Non-IE may have the text-shadow. IE 8 and less may have the Glow filter, as that seems passable for them. IE 9 - the best that can be done for it is probably a background/foreground arrangement. Hopefully IE 10 will do the text-shadow, so we won't have to worry about that.

But I would want to consider other possibilities. Like you could do an image capture of the way it looks in Firefox, and use those images with no text. That would work for all browsers, or, certainly for IE, with the rest using the text. If you do that, you'd want to disable the bullets before doing the captures. You should even be able to keep the text as transparent text on a transparent background thereby making it selectable in IE 9. Other browsers may do this too (Firefox does), but not IE 8 and less.

There are probably other possibilities. If we could make the images background images, that might change the situation in one or more of the IE browsers.

The sad truth is that not since IE 6 have these IE proprietary filters really worked well where text is involved. Even then, there were issue when combining them in transitions. Since then, the loss of anti-aliasing on the text pretty much makes them non-starters for anything containing text.

This has to be considered/worked around in whatever use is made of them.

Delziman
12-17-2012, 04:21 PM
Hi,
Is there any way to add link to caption only, not to entire image in Wow slider 2.7.1?
Your assistance will be highly appreciated.
Thanks

jscheuer1
12-17-2012, 04:41 PM
Please start a new thread for a new question. Please give links to your demo page and to the page where you acquired the script.