HTML5 Slideshow Support
Overview / Questions / What settings do we use in Dreamweaver (CS6) to make the slideshow responsive?
What settings do we use in Dreamweaver (CS6) to make the slideshow responsive?
Asked 19 May 2012 18:29:54
What settings do we use in Dreamweaver (CS6) to make the slideshow responsive? We changed width to 100% but the height of the images stays fixed when we reduce browser width. Thanks in advance.
Replies
0
Replied 21 May 2012 17:20:31
Hello,
Please check the following video tutorial: www.dmxzone.com/go?19902
0
Replied 21 May 2012 18:07:23
Hi Teodor

Thanks for the video link.

Unfortunately this is not really responsive. You've just changed the height of the image for each media query.

Therefore the width of the image reduces as the browser window reduces BUT THE HEIGHT DOES NOT CHANGE. So the image is distorted.

Try your example on a desktop at 1920x1200 and then drag the browser down to 1024x768. The image stays the same height!

I've got a single image in a Fluid grid that is FULLY responsive WITHOUT changing any media queries. I think your slideshow extension needs to work without any changes to the media queries so that the image scales properly in height AND width.

Regards

Simon

0
Replied 21 May 2012 18:10:54
Also ALL of the image should be visible at ALL TIMES. With your example (because the image is distorted) sometimes you only see a part of the image.
0
Replied 22 May 2012 05:27:54
Hello Simon,

Actually the media queries are what you need to use in the responsive design.
Please provide a link to your page.
0
Replied 22 May 2012 06:14:59
Hi Teodor

I am using the media queries set up by the CS6 fluid grid BUT I DON'T CHANGE THEM. I'll send you a link later.

Simon
0
Replied 22 May 2012 07:32:15
Hi Teodor

Single image in CS6 responsive grid (media queries not changed).
www.internetbuff.co.uk/dmxzone/simple-image.html

Dmxzone slideshow in the exact same responsive grid (media queries not changed).
www.internetbuff.co.uk/dmxzone/dmxzone-slideshow.html

I think you will see the difference when you drag the browsers right hand edge. Then drag the edge to the right to make the browser big again. Dmxzone slideshow corrupts the image.

It is INCORRECT to enter image heights in the CSS media queries.

1.The image should reduce in WIDTH smoothly.
2.The image should reduce in HEIGHT smoothly.

Simon
0
Replied 22 May 2012 07:48:27
Hi,

I see the fluid grid adds img {max-width:100%;} that also applies to slideshow images.
Please add anywhere in your css:
.dmxSlideshow .dmxSlide img, .dmxSlideshow .dmxSlide canvas {
max-width:none !important;
}

And use the media queries as described in the video tutorial - that is how you do the "responsive slideshow"
Reply to this topic