Responsive Ultimate Fade-in Slideshow (v2.6)

[ellenjones6]

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

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

3) Describe problem: I absolutely love this slide show. I have used it over fifty times in my existing website. Example: http://adirondackvic.org/BarnumBrook.html

I am redesigning the site to make it mobile friendly, so I need to revise the slide shows to make them all responsive. After a long and tearful struggle (due to my lamentable lack of coding skills), I finally got a slide show to work, sort of, on the new (hopefully mobile-friendly) website. The new slideshow is here: http://wildadirondacks.org/barnum-br...ive-trail.html .

But, as usual, I have some problems. I prowled the forum, but could not find solutions. I want to fix the following:

(1) JavaScript Disabled: When I was creating the old slideshows, I asked for and received instructions from you folks on how to provide a mechanism to degrade gracefully for those who have disabled JavaScript. I tried to incorporate that feature in the responsive slideshow, but it does not work the way it did in the old site, where the images appeared in a window with a slider. How can I make this work correctly in the responsive slide show?

(2) Tool Tips: For the old slideshow, you kindly sent me instructions on how to modify the code so that users could see the tool tips. I tried to incorporate the relevant code, but could not make it not work on the responsive shows. How can I make the tool tips visible for the slides on the responsive slideshow?

(3) Manual Navigation: The process of incorporating a manual navigation system for the responsive slideshow totally defeated me. I finally got it in there, using some very clunky code, but the result is not pretty. In the old slideshow and in your demos on the script page, the navigation elements are indented gracefully. How can I make this work on the responsive version? How can I modify my clunky code to make it efficient?

(4) CSS Media Queries: My efforts to apply your advice on media queries did not meet with complete success. The result is rather clunky. The slideshow looks pretty good at some widths, not so good at others. Any suggestions?

(5) Black Background: The old (nonresponsive) slideshow did not have a background larger than the images. (All my images are the same size.) The new responsive slideshow has a black background, which fills in to make the slideshow the same width as the div. Actually, I think I may like this better, but I would like to try to replicate the non-background approach of the old slideshow, with the slideshow about 80 percent of the div and centered in the middle of the div, to see what it looks like. How can I do that?

Please help! Thanks, Ellen

[molendijk]

I'm not familiar with the script you are using, so I can't help you there. Ddadmin maybe?
In the meantime, you could try this (which is the result of tweaking http://jquery.malsup.com/cycle/hover.html).
Examine the source and try to understand it. Each slide is inserted via lines like:

<div style='position: absolute; height:100%; width: 100%; height: 100%; text-align: center'>
<div style="position: absolute; left:0px;right:0px;text-align: center; ">
<button style="background: white; font-family: verdana; font-size: 11px; padding: 5px; border:0; border-radius: 5px; background: darkred; color: white">second image</button>
</div>
<img src="http://www.mesdomaines.nu/jochem/amerika3.jpg" alt="" style="height: 100%; display: inline-block" title="second image">
</div>

The tooltips are produced by title=... in the above code. The show is responsive. If you want no background, remove the border in div id="slideshow" and replace background: black with background: transparent in div id="slides".

The slideshow works fine for images having different sizes.

[ellenjones6]

Thank you very much. The slide show you sent is lovely, but it won't work for my purposes. I have over fifty Ultimate Fade-In Slide Shows, which need to be revised for the new site. The prospect of reworking all those pages for a completely new style of slide show is just too discouraging! So, I need to stick with Ultimate Fade In Slide Show v2.6 and try to revise the code to make that work on a responsive site. I think I created some confusion because I made a typo in my original post (now corrected). The Script URL (on DD) is: http://www.dynamicdrive.com/dynamici...nslideshow.htm

As you suggested, I examined the source carefully and tried to understand how your changes could be applied to the Ultimate Fade In Slide Show. I was unable to make any headway revising the code.

I am sorry I was not able to make better use of your suggestions. Now that I have corrected the URL of the script I am using, do you have any additional thoughts that might help me?

Thank you again for your help! ellen

[molendijk]

I see. I'm afraid I can't really help you at this point.

[molendijk]

Hi Ellen,

I did some tweaking in order to make the old DD slideshow script (http://www.dynamicdrive.com/dynamici...plegallery.htm) responsive. It has some of the features you want (and which are lost in the DD mobile version). Look here and here. Maybe you can use the tweaked version. Or maybe not. Just to let you know. Explanations in the source of the pages.

[ddadmin]

Your new layout looks good! Right now though there's a horizontal scrollbar that appears, which you can fix by setting the BODY margin to 0:

body{
margin: 0;
}

With regards to your question, with v2.6 of the slideshow (which your new page uses), what remaining issues from your original list do you need to address?

[molendijk]

Hello Ddadmin,
Some of Ellen's questions are also my questions. With the new script, is it possible to:
1 make the navigations buttons gracefully (dis)appear inside (not outside) the layer on hover / on touch?
2 have a layer's background that is not wider than the images?

Also, is it possible to have the descriptions of the images centered at the top?

As for 2 above, I tweaked the new script so as to have no layer's background at all. It worked, except that the image-transitions were not smooth anymore.

Finally, would it be possible to have the play/pause buttons in the new script? The old one has them.

Thanks.

[ddadmin]

Hi Arie:
I might not be able to fulfill all of you (and Ellen's) requests, but I can take a stab at a few of them as time permits and order of difficulty.

1) With regards to removing the layer's black background, the background is only shown if one of the images doesn't fit the parent container snuggly, as you probably know already. So the real issue is how to get the image to do that without distorting the image's original aspect ratio. It'd be easy if there were no constraints on the ratio- just set both the image's width and height to 100%. The Guide to Responsive Gallery talks about a few solutions to achieving what you want, with different compromises. Now, if you don't fancy the "black" color of the background, just do a search and replace inside .js file, and change "black" to say "white", or "transparent".

2) Creating a play/pause button shouldn't be too hard. With the attached modified .js file, you can now add a play button like so (in red):

<div id="fadeshow4toggler" style="width:50%; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://www.dynamicdrive.com/dynamicindex14/left.png" style="border-width:0" /></a>  <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://www.dynamicdrive.com/dynamicindex14/right.png" style="border-width:0" /></a>

<img class="playpause" src="play.png" data-pause="pause.png" />
</div>

Change the src and data-pause attribute to the images for the desired play and pause button.

[molendijk]

Thanks very much, ddadmin. But I'm afraid I wasn't clear enough about the background.
I downloaded your new js-file, and changed all 'black' to 'transparent' in it (and also disabled 'pause slideshow mouseover'). This makes the transitions between images of different sizes very ugly: parts of a wide image remain visible until the next (smaller) image has completely finished showing. See, for instance, the transition between the first image and the second one in this demo.
The problem is solved when we give the gallerylayer a background (can be done the html-file: .gallerylayer {background: black!important}), see this demo.
I guess this has to do with the way the script handles fading: it needs a background-color (or a full-sized background-image) to do it well.

I wonder if there's a way to remove the background from the gallerylayer without this issue. This would allow me to put a background-image on the page that 'shines through' the sideshow.

[stman]

Look Here.

http://www.dynamicdrive.com/forums/s...Responsive-div