Ultimate Fade-in slideshow (v2.4) description issue

**StevenMahoney** · 12-21-2011, 06:52 AM

1) Script Title: Ultimate Fade-in slideshow (v2.4) description does not appear

2) Script URL (on DD): Ultimate Fade-in slideshow (v2.4)

3) Describe problem: Description stopped appearing when I added some Spry widgets.

First off I want to thanks the author for the excellent slide show script and very clear and easy-to-follow description.

Issue Number 1)

The code works very well on the relatively unpopular page. However, when I add some Spry widgets, description disappears.

Can you kindly help me fix it?

HTML code:

Code:

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Camera Department</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="film-gear.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">

<!--Begins Slideshow files-->

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

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* 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
***********************************************/

</script>

<script type="text/javascript">

//Camera page

var mygallery=new fadeSlideShow({
	wrapperid: "camera1", //ID of blank DIV on page to house Slideshow
	dimensions: [270, 270], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["_images/camera1.jpg", "", "", "test text1"],
		["_images/camera2.jpg", "", "", "test text2"],
		["_images/camera3.jpg", "", "", "test text3"],
		["_images/camera4.jpg", "", "", "test text4"],
		["_images/camera5.jpg", "", "", "test text5"],
		["_images/camera6.jpg", "", "", "test text6"],
		["_images/camera7.jpg", "", "", "test text7"],
		["_images/camera8.jpg", "", "", "test text8"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1200, //transition duration (milliseconds)
	descreveal: "none",
	togglerid: ""
})

//Lenses page

var mygallery=new fadeSlideShow({
	wrapperid: "lenses1", //ID of blank DIV on page to house Slideshow
	dimensions: [270, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["_images/lenses1.jpg", "", "", ""] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1200, //transition duration (milliseconds)
	descreveal: "none",
	togglerid: ""
})
</script>

<!--End of Slideshow files-->


</head>

<body>

<div class="container">
  <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background: #C6D580; display:block;" /></a> 
    <!-- end .header --></div>
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Camera Department</a></li>
      <li><a href="grip.html">Grip Department</a></li>
      <li><a href="lighting.html">Lighting Department</a></li>
      <li><a href="#">Rental Forms</a></li>
      <li><a href="terms.html">Terms of Use</a></li>
      <li><a href="gallery.html">Photo Gallery</a></li>
      <li><a href="#">Contact Us</a>  <!-- end .sidebar1 --></li>
    </ul>
  </div>
  <div class="content">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Cameras</li>
        <li class="TabbedPanelsTab" tabindex="0">Lenses</li>
        <li class="TabbedPanelsTab" tabindex="0">Camera Support</li>
        <li class="TabbedPanelsTab" tabindex="0">Matte Boxes</li>
        <li class="TabbedPanelsTab" tabindex="0">Follow-Focus</li>
        <li class="TabbedPanelsTab" tabindex="0">Filters</li>
        <li class="TabbedPanelsTab" tabindex="0">Media</li>
        <li class="TabbedPanelsTab" tabindex="0">Power</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent"><div class="slideshow" id="camera1"></div>
        <div class="slideshowcontent">
          <p>Features 1 sliding leg, making it possible to set the stand up on uneven surfaces, grip head and arm included for positioning flags, gels, cards, silks, etc. </p>
          <p>Footprint:	27.5&quot;/699mm, load capacity - 22lbs/10kg, folding base	- 21&quot;/533mm, min/max height	- 53&quot;/126.5&quot; (126cm/321cm), width	- 27.5&quot;, depth	- 27.5&quot;, weight	- 11lbs/5kg (without griphead &amp; arm).</p><br>
        </div></div>
        <div class="TabbedPanelsContent"><div class="slideshow" id="lenses1"></div>
        <div class="slideshowcontent">
          <p>C-stands nest when not in use, saving valuable space. 
            Features 1 sliding leg, making it possible to set the stand up on uneven surfaces, grip head and arm included for positioning flags, gels, cards, silks, etc. </p>
          <p>Footprint:	27.5&quot;/699mm, load capacity - 22lbs/10kg, folding base	- 21&quot;/533mm, min/max height	- 53&quot;/126.5&quot; (126cm/321cm), width	- 27.5&quot;, depth	- 27.5&quot;, weight	- 11lbs/5kg (without griphead &amp; arm).</p><br>
        </div></div>
        <div class="TabbedPanelsContent">
          <div id="TabbedPanels2" class="TabbedPanels">
            <ul class="TabbedPanelsTabGroup">
              <li class="TabbedPanelsTab" tabindex="0">Tripods</li>
              <li class="TabbedPanelsTab" tabindex="0">Fluid Heads</li>
              <li class="TabbedPanelsTab" tabindex="0">Car Mounts</li>
            </ul>
            <div class="TabbedPanelsContentGroup">
              <div class="TabbedPanelsContent"><div class="slideshow" id="tripod1"></div>
        <div class="slideshowcontent">
          <p>C-stands nest when not in use, saving valuable space. 
            Features 1 sliding leg, making it possible to set the stand up on uneven surfaces, grip head and arm included for positioning flags, gels, cards, silks, etc. </p>
          <p>Footprint:	27.5&quot;/699mm, load capacity - 22lbs/10kg, folding base	- 21&quot;/533mm, min/max height	- 53&quot;/126.5&quot; (126cm/321cm), width	- 27.5&quot;, depth	- 27.5&quot;, weight	- 11lbs/5kg (without griphead &amp; arm).</p><br>
        </div></div>
              <div class="TabbedPanelsContent"><div class="slideshow" id="head1"></div>
        <div class="slideshowcontent">
          <p>C-stands nest when not in use, saving valuable space. 
            Features 1 sliding leg, making it possible to set the stand up on uneven surfaces, grip head and arm included for positioning flags, gels, cards, silks, etc. </p>
          <p>Footprint:	27.5&quot;/699mm, load capacity - 22lbs/10kg, folding base	- 21&quot;/533mm, min/max height	- 53&quot;/126.5&quot; (126cm/321cm), width	- 27.5&quot;, depth	- 27.5&quot;, weight	- 11lbs/5kg (without griphead &amp; arm).</p><br>
        </div></div>
              <div class="TabbedPanelsContent">Content 3</div>
            </div>
          </div>
        </div>
        <div class="TabbedPanelsContent">Content 4</div>
        <div class="TabbedPanelsContent">Content 5</div>
        <div class="TabbedPanelsContent">Content 6</div>
        <div class="TabbedPanelsContent">Content 7</div>
        <div class="TabbedPanelsContent">Content 8</div>
      </div>
    </div>
    <h1>&nbsp;</h1>
    <!-- end .content --></div>
  
  <div class="footer">
    <p>Copyright 2011</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
</script>
</body>
</html>

Issue Number 2)

How can I make rounded corners mentioned by MyOtherAccountIsHosed show the border (or double borders)? The code he/she proposed was

Code:

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

and it works well. I tried to replace border-width:0 with border: thin solid black , but it looks like a portion of the border is hidden beneath the picture frame.

Is there any way to fix that?

Steven

**jscheuer1** · 12-21-2011, 09:25 AM

Please post a link to the page on your site that contains the problematic code so we can check it out.

**StevenMahoney** · 12-21-2011, 05:33 PM

The problematic page is located here: www.film-gear.com.

I put some test words for the description of the camera only.

Steven

**StevenMahoney** · 12-21-2011, 05:36 PM

John,

The issue number 2 is no longer an issue, MyOtherAccountIsHosed has helped me with it. :-)

Steven

**jscheuer1** · 12-21-2011, 06:32 PM

You might have other issues once you start to really flesh this out, but Spry doesn't appear to be interfering with the descriptions. In a local mockup I made the highlighted change to the first new fadeSlideShow() call:

Code:

var mygallery=new fadeSlideShow({
	wrapperid: "camera1", //ID of blank DIV on page to house Slideshow
	dimensions: [270, 270], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["_images/camera1.jpg", "", "", "test text1"],
		["_images/camera2.jpg", "", "", "test text2"],
		["_images/camera3.jpg", "", "", "test text3"],
		["_images/camera4.jpg", "", "", "test text4"],
		["_images/camera5.jpg", "", "", "test text5"],
		["_images/camera6.jpg", "", "", "test text6"],
		["_images/camera7.jpg", "", "", "test text7"],
		["_images/camera8.jpg", "", "", "test text8"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:5000, cycles:0, wraparound:true},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1200, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

And the descriptions showed up on hover of the images. You had it set to "none", so of course none were showing up. See the documentation for other options:

descreveal

Defaults to "ondemand"

For a slideshow in which at least one image has a description associated with it, this option dictates the style of the Description Panel. The four possible values are:

"ondemand": Reveals the description when the user mouses over the slideshow, then hides it again when the mouse moves out.
"always": Shows a persistent description panel at the foot of the slideshow that can be dismissed by clicking on the "x" icon.
"peekaboo": (v2.4 feature). Reveals the description for each image automatically by sliding it in view each time, then hiding it again before the next image is shown. This setting is similar to "always" above, except the description isn't always visible, allowing viewers to see each image in its entirety momentarily.
"none": Explicitly disables the descriptions from showing. While not defining a description for any of your images inside the initialization code has a similar effect, this option is useful when you wish to define descriptions, but just not show them using one of the methods above, but rather, in combo with the onslide() event handler for example.

**StevenMahoney** · 12-22-2011, 02:26 AM

John,

I played with the descreveal option and no matter how I change it, the description does not appear. When I posted the code, I forgot that I turned off the description option. :-)

If you look at my web site again, you will see that the descreveal option changed to "always", yet the description is still hidden.

If it is not spry, I wonder what it could be, as this is all I have added to the blank site...

Steven

**jscheuer1** · 12-22-2011, 02:58 AM

Worked here when I made a local mock up of the page including the Spry code.

And, I just checked your live demo again. If you mean:

film-gear.com/camera.html

It still has:

Code:

	descreveal: "none",

Please change the live page or point me to the actual page in question so I can diagnose it.

**StevenMahoney** · 12-22-2011, 03:24 AM

I am an idiot.... :-)))

Thanks! It all works perfectly now! :-)))

John, since I have rounded corners now, how can I make the description to have rounded bottom corners? :-)

Steven

Thread: Ultimate Fade-in slideshow (v2.4) description issue

Thread Tools

Search Thread

Ultimate Fade-in slideshow (v2.4) description issue

page with the problem

Bookmarks

Bookmarks

Posting Permissions