Ultimate Fade-in slideshow (v2.4) - Rounded Corners?

[MyOtherAccountIsHosed]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem:

Is there a way to put rounded corners on the slideshow via CSS? I've tried a container with rounded corners, but it doesn't work.

[ddadmin]

Well, the easiest way would be to use CSS3's border-radius property. Assuming for example your slideshow's DIV container has an ID of "fadeshow1", inside your CSS, you may add the below to give it rounded corners:

#fadeshow1{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

[MyOtherAccountIsHosed]

I tried that, but it didn't work. I also tried putting the "fadeshow1" container inside another container. That didn't work either. I did a little more investigating and found that it works great in IE9 and Firefox, but not Chrome or Safari.

See it work and not work here.

Unfortunately, because of the project's background, I can't just put rounded corners on the slides. And I am resisting trying PNGs with transparent corners (I also saw that someone else had problems with those in the forums).

Any other ideas?

[MyOtherAccountIsHosed]

I figured it out. This is what I did:

1. Change line 221 in the fadeslideshow.js file from:

layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'

to

layerHTML+='<img src="'+imgelement[0]+'" style="-moz-border-radius:20px; -webkit-border-radius:20px; border-radius: 20px; border-width:0;" />\n'

2. Remove from lines 48 & 54.

background:'black',

This appears to work in all the latest versions of IE, Chrome, Safari, & Firefox.

[StevenMahoney]

MyOtherAccountIsHosed,

How can I add a border to your code? If I use border: thin solid black, for example, the border is only seen on top and on the left of the image, but cuts off on the right and bottom. Any ideas how to fix that?

Steven

[MyOtherAccountIsHosed]

I was able to duplicate your problem. To fix it, I didn't put your border command in line 221, as I am assuming you did. Instead, change line 48 to include border:'thin solid black', MozBorderRadius:'20px', WebkitBorderRadius:'20px', borderRadius:'20px',

So the whole line 48 should look like this:

setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', overflow:'hidden', border:'thin solid black', MozBorderRadius:'20px', WebkitBorderRadius:'20px', borderRadius:'20px', width:setting.dimensions[0], height:setting.dimensions[1]}).empty()

Hope this works

[StevenMahoney]

Thank you very much!!!! The solution works perfectly! You are awesome!

[StevenMahoney]

MyOtherAccountIsHosed,

Last question - how to make rounded corners on the bottom of the description text area? I spent a lot of time analyzing the code and I know now how to change the color of the text, color of the description text box, its opacity, but not the bottom corners...

Steven

[jscheuer1]

I haven't been in on this rounded corner thing because I'm not up on the css for it, the various border-radius, etc. properties and their possible values.

But I do know this script almost as well as its author. I may even know some things about it he doesn't.

In any case, as far as any type of style goes, there's very little that requires you edit the script. Almost everything except those things that are animated (opacity, z-index, some dimensions, and positioning) and even those (though usually those shouldn't be) to an extent can be controlled with regular css style in a stylesheet. In the long run using a stylesheet is better because it's much easier to keep track of, and can be different for two or more different slideshows on the same page and/or site, or controlled globally for the site from a single stylesheet.

Since you're talking about the description panel, it looks like so:

<div class="fadeslidedescdiv" style="font: 11px Verdana;">
  <div class="descpanelbg" style="padding: 4px; background: none repeat scroll 0% 0% black;"></div>
  <div class="descpanelfg" style="padding: 4px; color: white;">Some day I'd like to explore these caves!</div>
</div>

I've removed the styles that either cannot or shouldn't be controlled from a stylesheet.

All of this is inside the div with the wrapperid. So, say you want to change the font that's in fadeslidedescdiv and the wrapper id is fadeshow1:

#fadeshow1 .fadeslidedescdiv {
	font: bold 12px "comic sans ms" !important;
}

Since it's set by the script, you need the !important keyword as shown, or you could just apply it to the descpanelfg div. Either way it will override what's in the script. If there's more than one show on a page, and you want them different, use each one's wrapperid in different rules. If there's only one show, or all shows should be the same, you don't need the wrapperid.

To change the color of the description for the only or all shows on a page or site:

.descpanelfg {
	color: yellow !important;
}

These rules can go in an existing stylesheet, or you can make one up just for that page.

If you want to round the corners of one or more these divisions, use the styles that do that. Probably they would best be applied only to the fadeslidedescdiv, but if you need or want to apply them to the others as well, or instead, you may do so.

Since no styles relating to the border of these divisions are set in the script, the !important keyword need not be used, but will not hurt.



If you'd like to see it, a somewhat typical layout for a slideshow at a given point in its execution, including all styles and classes as well as the wrapper, here it is:

<div id="fadeshow1" style="position: relative; visibility: visible; background: none repeat scroll 0% 0% black; overflow: hidden; width: 250px; height: 180px;">
  <div class="gallerylayer" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0% 0% black; z-index: 1000; opacity: 1;">
    <a href="#what" target="">
      <img src="http://i26.tinypic.com/11l7ls0.jpg" style="border-width: 0pt; display: none; margin-left: 0px; margin-top: 0px;">
    </a>
    <a href="http://en.wikipedia.org/wiki/Cave" target="_new">
      <img src="http://i29.tinypic.com/xp3hns.jpg" style="border-width: 0pt; display: inline; margin-left: 0px; margin-top: 0px;">
    </a>
    <img src="http://i30.tinypic.com/531q3n.jpg" style="border-width: 0pt; display: none;">
    <img src="http://i953.photobucket.com/albums/ae13/cljennings/P1010189_256.jpg" style="border-width: 0pt; display: none;">
  </div>
  <div class="gallerylayer" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0% 0% black; z-index: 999; opacity: 1;">
    <a href="#what" target="">
      <img src="http://i26.tinypic.com/11l7ls0.jpg" style="border-width: 0pt; display: none;">
    </a>
    <a href="http://en.wikipedia.org/wiki/Cave" target="_new">
      <img src="http://i29.tinypic.com/xp3hns.jpg" style="border-width: 0pt; display: none;">
    </a>
    <img src="http://i30.tinypic.com/531q3n.jpg" style="border-width: 0pt; display: none;">
    <img src="http://i953.photobucket.com/albums/ae13/cljennings/P1010189_256.jpg" style="border-width: 0pt; display: none;">
  </div>
  <img src="loading.gif" style="position: absolute; width: 54px; height: 55px; left: 98px; top: 35px; display: none;">
  <div class="fadeslidedescdiv" style="position: absolute; visibility: visible; width: 100%; left: 0px; top: 180px; font: 11px Verdana; z-index: 1001; height: 34px;">
    <div class="descpanelbg" style="position: absolute; left: 0px; top: 0px; width: 242px; padding: 4px; background: none repeat scroll 0% 0% black; opacity: 0.7; height: 100%;">
    </div>
    <div class="descpanelfg" style="position: absolute; left: 0px; top: 0px; width: 242px; padding: 4px; color: white; height: 100%;">Some day I'd like to explore these caves!
    </div>
  </div>
</div>

[StevenMahoney]

John,

I am still confused. Are we talking about the same thing? I was referring to the description that slides in below the image. Look at this picture:



So, I was trying to get that description look nice, as right now it interferes with the rounded borders.

Are we discussing the same thing?

Steven