HTML5 Slideshow Support Product Page
What settings do we use in Dreamweaver (CS6) to make the slideshow responsive?
Asked 13 years ago
1
has this question
13 years ago simon jennings posted:
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
Replied 13 years ago
13 years ago Teodor Kuduschiev replied:
Hello,
Please check the following video tutorial: www.dmxzone.com/go?19902
Please check the following video tutorial: www.dmxzone.com/go?19902
Replied 13 years ago
13 years ago simon jennings replied:
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
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
Replied 13 years ago
13 years ago simon jennings replied:
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.
Replied 12 years ago
12 years ago Teodor Kuduschiev replied:
Hello Simon,
Actually the media queries are what you need to use in the responsive design.
Please provide a link to your page.
Actually the media queries are what you need to use in the responsive design.
Please provide a link to your page.
Replied 12 years ago
12 years ago simon jennings replied:
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
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
Replied 12 years ago
12 years ago simon jennings replied:
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
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
Replied 12 years ago
12 years ago Teodor Kuduschiev replied:
Hi,
I see the fluid grid adds img {max-width:100%;} that also applies to slideshow images.
Please add anywhere in your css:
And use the media queries as described in the video tutorial - that is how you do the "responsive slideshow"
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"