Back to Top
The nuts and bolts for
Creative web development
Back to product page

HTML5 Slideshow Support

Overview » Questions » What settings do we use in Dreamweaver (CS6) to make the slideshow responsive?
Reply

What settings do we use in Dreamweaver (CS6) to make the slideshow responsive?

simon jennings
Newbie



Since: 31 Oct 2002
Posts: 21
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.

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.

1 PERSON HAS THIS QUESTION I have this question, too!

Teodor Kuduschiev
Official Representative



Since: 20 Mar 2009
Posts: 4,280
Replied 21 May 2012 17:20:31
0
Hello,
Please check the following video tutorial: www.dmxzone.com/go?19902
simon jennings
Newbie



Since: 31 Oct 2002
Posts: 21
Replied 21 May 2012 18:07:23
0
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

simon jennings
Newbie



Since: 31 Oct 2002
Posts: 21
Replied 21 May 2012 18:10:54
0
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.
Teodor Kuduschiev
Official Representative



Since: 20 Mar 2009
Posts: 4,280
Replied 22 May 2012 05:27:54
0
Hello Simon,

Actually the media queries are what you need to use in the responsive design.
Please provide a link to your page.
simon jennings
Newbie



Since: 31 Oct 2002
Posts: 21
Replied 22 May 2012 06:14:59
0
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
simon jennings
Newbie



Since: 31 Oct 2002
Posts: 21
Replied 22 May 2012 07:32:15
0
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
Teodor Kuduschiev
Official Representative



Since: 20 Mar 2009
Posts: 4,280
Replied 22 May 2012 07:48:27
0
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

Message
Reply