Featured Content Slider first image flicking out not fading ( all browsers ).

1) Script Title: Featured Content Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem: Have installed Featured Contant Slider and made recommended changes to enable script to work with IE 9 and all works fine in all browsers now except first image fades in then flicks out before second image fades in. After this first change of image fade in fade out works fine until page is reloaded the same thing happens at first change.

Have got the enablefade set to true with a fade degree of 0.03

Any help please.

Quote:

---

Originally Posted by Chris-fr

1) Script Title: Featured Content Slider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem: Have installed Featured Contant Slider and made recommended changes to enable script to work with IE 9 and all works fine in all browsers now except first image fades in then flicks out before second image fades in. After this first change of image fade in fade out works fine until page is reloaded the same thing happens at first change.

Have got the enablefade set to true with a fade degree of 0.03

Any help please.

---

Could you please post the code that you have for the content slider? Just as a question, does it do this in all browsers? It sounds to me like something is happening when it first loads if the problem is not repeating after the first image has gone past.

I think I see what you mean. I can only replicate the problem in IE though. Using a text only editor like NotePad, in the contentglider.css file make the highlighted changes as shown:

Code:

---

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}

.pagination{
width: 400px; /*Width of pagination DIV. Total widt . . .

---

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

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

I've made the CSS modifications as noted but I'm not seeing a change. Site is here: http://www.odd-ny.com/

Is there a way do delay the player display until the images load so the flicker isn't visible?

Quote:

---

Originally Posted by TRUSTCollective

I've made the CSS modifications as noted

---

No you have not. This is the location of the contentslider.css file:

http://www.odd-ny.com/uploads/NCleanBlue/js/contentslider.css

And this is it's contents:

Code:

---

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border-bottom-width: 6px;
width: 720px; /*width of featured content slider*/
height: 331px;
margin:0 auto;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 0px;
background: white;
width: 720px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
display:none;
width: 720px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: white;
padding: 0;
}

.pagination a{
padding: 0;
text-decoration: none;
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

---

Those should all be 0:

Code:

---

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border-bottom-width: 6px;
width: 720px; /*width of featured content slider*/
height: 331px;
margin:0 auto;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 0px;
background: white;
width: 720px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}

.pagination{
display:none;
width: 720px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/
text-align: right;
background-color: white;
padding: 0;
}

.pagination a{
padding: 0;
text-decoration: none;
background: white;
}

.pagination a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}

---

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

Sorry, I did change it. I didn't expect you to look so quickly so I changed it back after it had no effect. Now it should be changed again.

No flicker here. Make sure to clear the browser cache and refresh the page.

I did both at the time and it was still creating the flicker. It is now too and I've tried it in Chrome, Firefox, and ie. Maybe we're looking for different things.

I think the only thing your solution fixed was the initial load. For example, if i go to the page the first time, the problem seems to be gone. But if I refresh that same page, the problem still replicates. Is there a more complete solution? If you do a refresh, does it not show the problem at all?

I had not been doing a refresh. I see what you mean. When I have more time I'll look into it.

It does seem though that by using 0, it's better than using 1, at least in IE. With 1 you get a flicker each time it comes around to the beginning. With 0 it seems only to be an issue as the page loads.

In all others, regardless of the 0 or 1, it appears to only be an issue at page load.

Pages not behaving smoothly at page load is common. As images, css files and scripts are being fetched, layouts being read, items can flicker and/or jump around on the page. Most folks are used to this. It's a bit of a fine point to eliminate all of these sorts of loading artifacts from a page.

That said, I will be taking a closer look at this when I have more time.

OK, for what you're doing with this script, you would be better off with:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

It shouldn't have that problem. If it does, use this updated version:

http://home.comcast.net/~jscheuer1/s...deslideshow.js

I got a little bored, as long as you haven't moved or removed the images and other resources, here's a demo:

http://home.comcast.net/~jscheuer1/s..._collect_h.htm

I'm sort of cleaning up someone else's work so I just want to be clear. If I copy and paste the new scripting into the old template making sure the refs to the java and image files are correct (based off your sample page), I should be good to go, right? The previous guy set this up on CMS Made Simple. Thanks again.

No, or I'm not sure what you mean. I'll explain what to do.

The demo I set up uses my copy of fadeslideshow.js and my copy of the loading.gif image as configured here:

Code:

---

. . . ion a:hover, .pagination a.selected{
color: #000;
background-color: #FEE496;
}
#slider1, #slider1 .gallerylayer img {
        width: 720px;
        height: 331px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/uploads/NCleanBlue/js/accord_menu.js"></script>
<script src="/uploads/NCleanBlue/js/jquery.hover_caption.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://home.comcast.net/~jscheuer1/side/inmotion/js/fadeslideshow.js">
/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var $ = jQuery;
fadeSlideShow_descpanel.controls[2][0] = 'http://home.comcast.net/~jscheuer1/side/inmotion/loading.gif';
</script>
  </head>  <body>
    <div id="ncleanblue">
      <div id="pagewrapper" class="core-wr . . .

---

You should grab your own copies (right click and 'Save As'):

http://home.comcast.net/~jscheuer1/s...deslideshow.js
http://home.comcast.net/~jscheuer1/s...on/loading.gif

Put them on the odd-ny.com server and point to them there in the code above.

I also added style which can be seen in the above snippet:

Code:

---

#slider1, #slider1 .gallerylayer img {
        width: 720px;
        height: 331px;
}

---

That's required, don't miss it.

You can and should keep:

Code:

---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

---

It should replace:

Code:

---

<script type="text/javascript" src="/uploads/NCleanBlue/js/jquery.js"></script>

---

from the old page.

The scrpt credit in the above should be changed from:

Code:

---

/***********************************************
* Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

---

to:

Code:

---

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

---

And of course the script near the end of my demo must be added where it is:

Code:

---

<script type="text/javascript">
var mygallery=new fadeSlideShow({
        wrapperid: "slider1", //ID of blank DIV on page to house Slideshow
        dimensions: [720, 331], //width/height of gallery in pixels. Should reflect dimensions of largest image
        imagearray: (function(){
                var imagearray = [], $t, $a;
                $('#slider1 .contentdiv').each(function(){
                        $t = $(this), $a = $t.find('a');
                        imagearray.push([$t.find('img').attr('src'), $a.size()? $a.attr('href') : '', $a.size()? $a.attr('target') || '' : '']);
                });
                return imagearray;
        })(),
        displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 500, //transition duration (milliseconds)
        descreveal: "ondemand",
        togglerid: ""
})

</script>

---

While the commented script below it can be removed:

Code:

---

<!-- <script type="text/javascript">

featuredcontentslider.init({
        id: "slider1",  //id of main slider DIV
        contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
        toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
        nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
        revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
        enablefade: [true, 0.1],  //[true/false, fadedegree]
        autorotate: [true, 3000],  //[true/false, pausetime]
        onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
                //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
                //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
        }
})

</script> -->

---

That should be it. Let me know if you have any problems.

Oh and once you get it set up, let me know because I should take down the demo. You don't want it showing up in search engine results.