HTML5 slideshow plugin

[marcelm]

Thaks for the plug-in and I would love to see also as plug-in for displaying the pictures on tablets and phone. I am a fan of the plug-in EnlargeIt! from Timo and now also your html5sldieshow Plug-in. With EnlargeIt! you can put pictures side by side to compare on big screens what is strong point.

Things that I came across during usage. In slide.min.js there is a bit of code "B.innerHTML" and the debugger reported that it should be "b.innerHTML". In slide.js and slide.min.js in the "swipe" part the "_prev" and "_next" have to be exchanged to have a more natural result when swiping.

[ron4mac]

Things that I came across during usage. In slide.min.js there is a bit of code "B.innerHTML" and the debugger reported that it should be "b.innerHTML". In slide.js and slide.min.js in the "swipe" part the "_prev" and "_next" have to be exchanged to have a more natural result when swiping.

Thank you for your feedback. I'll try to do more work on the plugin soon.

[marcelm]

Thanks and I have now forced it to use only slide.js and I can now slide correctly however it does not centre/rescale the picture when I rotate the phone/tablet so there must be some differences between slide.js and slide.min.js. The date and time only differ one minute so it should be the same version.

[ron4mac]

I agree with _prev and _next needing to be swapped. As mentioned in the release note, I had quickly added swipe recognition and missed that backwards swiping behavior. As for rotating the touch device, I don't quite see what you mean about image positioning/scaling. It is working as I would expect for me (Safari/IOS). Perhaps you are referring to images being at the top of the screen when in portrait orientation. The original design was for my own use and was totally targeting desktop machines. It was designed that the image would be tight against the top, next to the controls. I suppose it would be good to change that behavior and have the image centered vertically. I could add it as an option. The problem then becomes .. where to display the captions. I think it should be close to the image but don't really want it jumping around.

[marcelm]

I agree with _prev and _next needing to be swapped. As mentioned in the release note, I had quickly added swipe recognition and missed that backwards swiping behavior. As for rotating the touch device, I don't quite see what you mean about image positioning/scaling. It is working as I would expect for me (Safari/IOS). Perhaps you are referring to images being at the top of the screen when in portrait orientation. The original design was for my own use and was totally targeting desktop machines. It was designed that the image would be tight against the top, next to the controls. I suppose it would be good to change that behavior and have the image centered vertically. I could add it as an option. The problem then becomes .. where to display the captions. I think it should be close to the image but don't really want it jumping around.

I now understand why swipe works different. This has to with that a 180 degree rotation is not compensated in the swipe caculation.

The pictures at the top is fine to me and a little space between the navigation bar and the picture would be welcome. An user will rotate their tablet to maximize the viewing area according to the orientation (portrait/landscape). I will power up my PC later this day check if slide.js rescaling/centering still incorrect on my 7" tablet.

I am using responsive theme so all adapts so viewsize and rotation and your plugin is the next best to Bootstrap Carousel.

[marcelm]

On the moment I can't make head or tails from what I am testing. I get conflicting results and one time it works and the next time it does not. I am using Opera Mini (Webkit 39) and I check if the slides.js or slides.min.js is refreshed by tail-ing the HTTPD log-file.

[ron4mac]

@marcelm
Thanks for investigating this and helping to (hopefully) make the plugin better. I've fixed the natural swipe direction issue and I am not having any problem with device rotation(Safari/IOS). I'll include the new .js files here for testing purposes. There is also slight modification for swipe detection. Please be aware that if you have debug mode enabled and you are logged in as an admin, slide.js will be used rather than side.min.js.

[ron4mac]

In slide.min.js there is a bit of code "B.innerHTML" and the debugger reported that it should be "b.innerHTML".

This is occurring because you have removed the slide number element from the control bar.

[marcelm]

Thanks for the new JS versions and both are working fine.

I do hard-code the selection of which version of slides.js/slides.min.js I was usings each time I test so I had no different behaviour between devices. I am testing on PC with Firefox Nightly and Iron (chromium version). On my Nexus 7 I use Opera Mini (webkit 39) and Firefox Nightly. Firefox Nightly was for a long time my favourite browser on my tablet but it went downhill and I changed to Opera Mini.

I have now put the slide number element back in the control bar and I removed it before because on my phone the control bar wrapped to a second bar. The screen is just to small (Samsung S2).

The rotating and the automatic centring of the image is now OK and I think that is done by the browser.

I have an other thing that occurs on my site. I have albums of 2 picture and with two pictures it won't show the first one.

Thanks again for this plug-in.

[ron4mac]

I have an other thing that occurs on my site. I have albums of 2 picture and with two pictures it won't show the first one.

Thanks for finding that bug. I guess I must not have tested with so few images in an album.
Attached new js files to fix that.

[ron4mac]

@marcelm
Since you have gotten me to look closer at mobile devices and swiping, I thought I would put together image slide instead of dissolve. Here are replacement JS files and a replacement CSS file that implements image left/right slide. There are some issues with it yet when the screen size or orientation changes that I will have to take care of. But if you would like to give it a try, I would like to know if you think it should be an optional display method.

[marcelm]

Thanks for the new function and besides the already know problems on rotation I have noticed that when using the cursor-keys go left (go backwards) then the first two pictures are exchanged/slide from the right and the third slides in from the left as supposed.

I found the 0.3s slide time a bit short and I have doubled that to 0.6s. My tablet is recharging on the moment so I can try this version tomorrow on it so I can test then also the behaviour I mentioned above.

[ron4mac]

I have noticed that when using the cursor-keys go left (go backwards) then the first two pictures are exchanged/slide from the right and the third slides in from the left as supposed.

Corrected that issue (others as well) and combined the slide transition into a new release (v1.3) of the plugin (see original post above).

[marcelm]

I have used the 1.3 version and I lost the visual sliding on the tablet/PC and when rotating the picture does not resize any more. That resizing was a great feature of this plug-in.

[ron4mac]

I have used the 1.3 version and I lost the visual sliding on the tablet/PC and when rotating the picture does not resize any more. That resizing was a great feature of this plug-in.

I see what you mean about resizing when rotated ... I will fix that. My apologies for not doing enough testing before I posted v1.3. I don't know what you mean about losing visual sliding. Image transition is only dissolve and not slide left/right? Did you install the full plugin? Did you select transition type in the config?

[marcelm]

I did not visit the configuration page so it was still on the default setting. Now it is sliding smoothly. I am sorry for the confusing.

I did replace the whole plug-in directory because it was new version of the plug-in.

The opera browser is VERY aggressive when caching so I am now removing the cache (Android) of the browser in the settings. Not doing that drove me mad the last time when I was testing. I loaded the new Javascript but did not replace the version in cache and reused the chached version. :-( 

[marcelm]

Just tested version 1.31 and resizing on rotation is working. When swiping between pictures the behaviour is a bit different from earlier versions. I suggest to compare with/height of the current picture with/height the incoming picture, when one differs force a resize.

[marcelm]

Try this album. This has portrait and landscape pictures and also the two landscapes has a different aspect ratio

www dot mmmfotografie dot nl/index.php?file=html5slideshow/fullSlide&album=373

[ron4mac]

Try this album. This has portrait and landscape pictures and also the two landscapes has a different aspect ratio

www dot mmmfotografie dot nl/index.php?file=html5slideshow/fullSlide&album=373

Okay ... I think I know what the issue might be. I prepare 5 images for display at a time (out of possible hundreds in an album) ... the current image, 2 previous and 2 next. The 2 previous and 2 next get pre-sized for the current window/rotation. In response to a window change I'll have to resize the other 4 as well as the current image. I'll make that change as quickly as possible and probably just repost it as 1.3.1. I'll let you know.

Thanks for you patience and help.

[ron4mac]

I'll make that change as quickly as possible and probably just repost it as 1.3.1. I'll let you know.

Change made.

To be sure you know, the slideshow will not display any image larger than it's natural size.