images slideshow for mobile display
7 posts by 3 authors in: Forums > CMS Builder
Last Post: March 19, 2014 (RSS)
By willydoit - March 13, 2014
Hi all,
We are in the middle of a redesign of one of our sites with a focus on making it more mobile friendly. at present we have client property images listed within a table which doesn't display correctly when viewed on a mobile device. I am now considering the use of a slideshow program which will support pulling the images from the database and is compatible with mobile phones and ios devices.
Our pages use jquery for menu functions and apparently has to use a version of jquery which is v1.7.2.min.js or earlier due to major changes which were apparently made post that version. As a result we need a slideshow application which will work with v1.7.2.min.js versions of jquery or earlier or doesnt use jquery at all but at the same time wont create conflicts.
I would be grateful for any suggestions of potential slideshow software which will meet our needs or indeed suggestions for implementing a display of up to 10 images which looks neat and tidy on both standard display devices and mobile devices. Previously we were simply creating a columnular list of 10 thumbnails down the right of the display page and used fancybox to overlay the larger images which worked fine when viewed on desktops or even tablets but isnt proving suitable for mobile use. Any/all suggestions for displaying up to 10 images neatly and mobile friendly would be gratefully received.
Thanks in advance
Willydoit
By kitsguru - March 16, 2014 - edited: March 16, 2014
By gregThomas - March 18, 2014
Hi,
I've not personally used it, but I know a lot developers have started using bootstrap:
It's a HTML/CSS/JS framework designed to make responsive design easier. It also has an image carousel built into it.
Thanks!
Greg
PHP Programmer - interactivetools.com
By willydoit - March 19, 2014 - edited: March 19, 2014
Hi kitsguru thanks for that, the bxslider program works fine if all images are the same size but unfortunately ours arent so we run into display issues with that one.
By willydoit - March 19, 2014
Thanks Greg,
We already have the site design pretty much in place, its just the slider we need and we need one which doesnt create incompatibilities with other items within the design, we already have the jquery nivo slider in use and I did think it would be a simpe job to add another instance of that into the page but even that runs into issues. I have found a very simple responsive slider which works for me but am just running into issues with the display due to the images being different sizes. I need to somehow have the display in some form of container so that the different image heights dont cause the rest of the page to jump up or down on each image change making it unreadable,
The simple solution was to place it into a table with a fixed height equal to the largest image height that would be displayed which works okay, however the fixed height table isnt responsive and so when viewed on a mobile although the images are smaller I end up with lots of unwanted white space above and below because the table still allocates the height set at 450px.
I am afraid that my css knowledge isnt sufficient to know how to create an alternative to the table that would in itself be responsive and logic tells me that it isnt possible to create something with a fixed height and is also responsive so not sure where I go from here.
By gregThomas - March 19, 2014
Hi willydoit,
I've posted some CSS which might help in this thread:
http://www.interactivetools.com/forum/forum-posts.php?Thumbnail-resizing-issue-79377
If your slide show system allows you to use div tags as well as image tags either of these might be a good solution.
This might be something we could help you with via consulting. If you send an e-mail to consulting@interactivetools.com, we can give you an estimate to fix the issue.
Thanks!
Greg
PHP Programmer - interactivetools.com
By kitsguru - March 19, 2014
Actually there is a setting in bxslider to account for this:
adaptiveHeight
I also have images of different sizes and this seem to handle it for me, I just set the width to the same and let height float.