images slideshow for mobile display
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
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.
PHP Programmer - interactivetools.com
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.