HTML5 Slideshow Support Product Page

Answered

html5 slideshow fluid grid layout

Asked 05 Dec 2012 11:34:51
3
have this question
05 Dec 2012 11:34:51 Pete Manning posted:
Hi, I cannot get the html5 slideshow to work with a fluid grid layout.

I have even borrowed the same images from your demo

www.dmxzone.com/demo/html5slideshow/responsive/index.html and tried to follow the tutorial and it just does not work.

From what I can see the video does not cover all the steps (there are little bits missing and not mentioned) and the website demo is not the same as the video and therefore trying to do this does not provide the same result.

The issue I have is that the images (900x613) are not resizing - www.quoling.com - ok it's not the best example but it should show what I mean.

Is there a full tutorial that I can view, that covers all steps properly?

(I am sure I have done something wrong but I am sure I have followed all steps in the tutorial).

Thanks

Pete


Promoted Answers

Replied 06 Dec 2012 12:54:03
Hello Pete.

I've sent you an e-mail with css file attached.

Regards:Vulcho.

You need also to add the following css rule:

.dmxSlideshow img, .dmxSlideshow object {
	max-width:none !important;
}

Replies

Replied 05 Dec 2012 11:51:12
05 Dec 2012 11:51:12 Vulcho Vulev replied:
Hello Pete.

Please take a look at the following video tutorial:
Creating a Responsive HTML5 Slideshow


Regards:Vulcho.
Replied 05 Dec 2012 12:41:40
05 Dec 2012 12:41:40 Pete Manning replied:
Vulcho,

As mentioned in my post, I have already used this tutorial and even used the same pictures. There seem to be steps missing or there is something I am missing as it does not work.

I am at work now but will provide a better "demo" of what I mean later. Again, I am using the tutorial AND the same pictures and yet it does not work!

Thanks

Pete
Replied 05 Dec 2012 12:46:58
05 Dec 2012 12:46:58 Vulcho Vulev replied:
Hello Pete.

Can you specify the browser and browser version that you are using ?

Regards:Vulcho.
Replied 05 Dec 2012 12:49:33
05 Dec 2012 12:49:33 Pete Manning replied:
Hi Vulcho,

I have used both IE9 and Firefox with the same results

Thanks

Pete
Replied 05 Dec 2012 12:51:50
05 Dec 2012 12:51:50 Pete Manning replied:
www.quoling.com/responsive.css shows the simple css I am using.
Replied 05 Dec 2012 13:16:19
05 Dec 2012 13:16:19 Vulcho Vulev replied:
Hello Pete.
Can you try to clear your browser cache in IE and try again?
Also i see that the layout is responsive.

Your page on various devices

Regards:Vulcho.
Replied 05 Dec 2012 13:39:02
05 Dec 2012 13:39:02 Pete Manning replied:
Hello Vulcho,

I have just tried on my HTC X for the first time and I still have the same problem. The photo's appear fine the first time but if you refresh or "change orientation" then they start to "warp" (for want of a better word) this is the same on 2 different machines I have tried here at work and also at home - I also get the same problem using Chrome.

These two images show the issue I am having on all devices.

www.quoling.com/Responsive/First_Time_Chrome.jpg
www.quoling.com/Responsive/Second_Time_Chrome.jpg

I am sure there is something I am doing wrong but I am not sure what.

Thanks

Pete
This reply was removed on 12/5/2012 2:10:34 PM.
See the changelog
Replied 05 Dec 2012 14:16:16
05 Dec 2012 14:16:16 Vulcho Vulev replied:
Hello Pete.

Can you remove the following custom queries for the slideshow:

www.quoling.com/responsive.css
#slideshow1 {
    height: 400px !important;
}
#slideshow1 {
    height: 280px !important;
}
#slideshow1 {
    height: 100px !important;
}


Regards:Vulcho.
Replied 05 Dec 2012 14:16:17
05 Dec 2012 14:16:17 Pete Manning replied:
Hi Vulcho,

I have "borrowed" a responsive.css and boilerplate from one of the sample sites on DMXZone which although not working perfectly no longer appears to reproduce the same issue.

But yes, I was resizing the browser, or on the HTC, just switching form portrait to landscape.

I will have another look later today. Do you have any "tips" on how to work out the resize height for the smaller devices depending on the original image size?

Thanks again for your help

Pete
Replied 05 Dec 2012 14:18:49
05 Dec 2012 14:18:49 Pete Manning replied:
Thanks for the answer regarding the custom queries. I am a little confused - according to the tutorial, this is what is needed? - can you explain why this is not required in my case?

Thanks

Pete
Replied 05 Dec 2012 14:49:34
05 Dec 2012 14:49:34 Vulcho Vulev replied:
Hello Pete.

The images dimensions in the demo are 1230x450 and you are using: 900x600. That means different dimensions. See the images proportions are aprox: 3:1 in the demo and in your case 3:2. That is why the custom queries you borrowed won't work like in the demo.

Regards:Vulcho.
Replied 05 Dec 2012 15:45:20
05 Dec 2012 15:45:20 Pete Manning replied:
Hi Vulcho.

I understand that, which is why the original responsive.css was set up to use different values for the height.

However these still reproduced the same problem.

I will have another look later and let you know when that has been done as I think there is a issue here, just not sure what it is

Thanks again

Pete
Replied 05 Dec 2012 19:24:43
05 Dec 2012 19:24:43 Pete Manning replied:
Hi Vulcho,

I have started from scratch and followed the tutorial 100% the same using the same surf photos and there is still a problem which is clearly not explained in the tutorial but is rectified in the showcase sites.

www.quoling.com - shows the live issue.

www.quoling.com/Resize_Issues/Firefox_error.jpg shows the problem

www.quoling.com/Resize_Issues/Resize_Issues.zip

contains a short video (unzip open htm in a browser) that shows me on the site live in firefox resizing the browser.

As you can see, it only resizes properly IF I reload the
page.

I have checked and rechecked and cannot find any difference between what the tutorial suggests and what I have done.

All the tutorials and examples I have seen regarding using fluid grid layouts suggest that using "mobile first" is the correct way, and yet the tutorial does not do so. I also noticed a few examples stating that the images should not have their width/height declared and yet the HTML that is generated using the HTML Slider does include this.

<div class="dmxSlide" id="img_1">
<img src="images/surf/1.jpg" border="0" width="1230" height="450" alt="" />
</div>

I of course might be completely wrong but hope this information helps to explain the issue I am having.

Thanks

Pete
Replied 06 Dec 2012 12:54:03
06 Dec 2012 12:54:03 Vulcho Vulev replied:
Hello Pete.

I've sent you an e-mail with css file attached.

Regards:Vulcho.

You need also to add the following css rule:

.dmxSlideshow img, .dmxSlideshow object {
	max-width:none !important;
}

Reply to this topic