ImageFlip - Simple JQuery Mobile Image Gallery Plugin
Sunday 14 October 2012 10:35 PM
I’ve been working on a mobile version of the TeaPot blog application this weekend and realized that I'm in a need of a mobile image gallery interface to go with the in-built TeaPot image gallery function. There are few good mobile image gallery functions out there, but I'm infected with the habit of enjoying coding, so I created another one. I don't think one extra JQuery Mobile Image Gallery will do any harm to humanity.
ImageFlip is a simple and lightweight Image Gallery plugin for JQuery Mobile. It creates a new hash page on display allowing the back button to function instinctively. The new hash page destroys itself on exit, keeping your page count intact. Also, I try not to trespass on users’ bandwidth by preloading images to create transition effects.
ImageFlip needs three resources :
1. loading.gif file (js/images/loading.gif)
2. CSS (you can find that at the header of the index.html file of the example - don't forget to copy this to your CSS file)
3. imageFlip.mini.js
Posted by Saman W Jayasekara at Monday 17 September 2012 12:35 PM
.
JavaScript
Sunday 07 April 2013 10:43 AM
Hi Sam... Yes that did the trick... thanks a million it's very much appreciated. Cheers Brian
Saturday 06 April 2013 03:32 AM
Hi Saman... First of all congratulations on a really nice and easy JQ Mobile Gallery... it has to be easy for me as a relative beginner to JQM! This http://goo.gl/yhmXr will take you to the page where you will see the link to your gallery (Image Gallery)... however something odd happens and I'm hoping you will be able to point out my error. You will see that it places the images in a list ie. one above the other down the page. You will also notice on the "title" it says "imageFlip Demo". If you refresh the page it changes to where the images are placed evenly across the mobile screen and also the "title" changes to "Image Gallery". What I don't understand (because of my inexperience) is why this is happening because I’ve checked and checked the index.html page that's on the server and cannot see why this should be so! I’m sure you will solve my problem or at least I hope you can. Many thanks Brian
Sunday 07 April 2013 09:32 AM
Try adding rel="external" in to the A tag in the main page. Let me know what happens.
Saturday 06 April 2013 09:14 PM
Try adding <!DOCTYPE html> at very top of the page and let me know if that did not change anything.
Sunday 07 April 2013 03:22 AM
Hi Sam... I've checked and <!DOCTYPE html> is already written at the very top of the page and so I guess that's not the problem. Whilst not a programmer/developer I have to say it is very strange why this happens because once you refresh the page then it works fine but I really need to have it working correctly first time. Cheers Brian
waynmeyer
Monday 18 February 2013 03:51 PM
Hey Saman
ive been trying o=to use your plugin dynamically, how can i set a gallery href image from my wordpress databse?
when you add this part
i need the href images to pull data from my custom field. Any chance you know this, i figured you would know as you writing your own plugins, well done, really take my hat off to you.
kind regards
Bruno
Monday 04 February 2013 07:43 PM
Hi, I love your gallery, great job!!
Is it possible to start gallery direct without any thumbnils?
Thanks agin!!
Monday 04 February 2013 07:59 PM
Add
$('#iGallery li a:first').trigger('click')
document.location.href="#imageflippage";
right after calling ImageFlip in your main page
E.g:
$( document ).delegate("#home", "pageinit", function() {
$('#iGallery').imageflip()
$('#iGallery li a:first').trigger('click')
document.location.href="#imageflippage";
})
Thursday 31 January 2013 01:56 PM
Hi there. Are you able to have several galleries on one page?
Thursday 27 December 2012 03:23 AM
It just simply works.
Thanks, you saved my day! :)
Rodrigo
Saturday 24 November 2012 07:15 AM
Hi Sam, your script is great, it has worked very well. I am new to programming and I'm doing little things for Android. Using JQuery Mobile + PhoneGap + HTML5. I was looking for a simple plugin for jQuery Mobile Gallery and yours is perfect. Will include a reference to your website and your plugin information in my application (my application is licensed cc-by-sa). Thank you for your wonderful work.
I still need to know one thing in Jquery, if I try to put the gallery in a separate html file and call it from the main html file I get error (in all plugins I've tried) in Chrome console (and in Android don´t work):
XMLHttpRequest cannot load file:///.........bla-bla-bla...gallery.html. Origin null is not allowed by Access-Control-Allow-Origin
But, i put the page inside then main html and all perfect.
josh
Wednesday 16 January 2013 08:28 PM
you need to put rel="external" in the anchor tags if you're linking outside of an html doc
Sunday 28 October 2012 12:27 AM
I have downloaded the theme and will use it as it has given me an idea for other users too.
Michael
Monday 01 October 2012 05:54 PM
I like your gallery. Its simple and clean. I am new to developing so forgive my silly questions....
How do I place a function on the image for the user to download the photo to their device? I am creating an app where you can browse a set of images, and if you like one, you can download it to your device.
Tuesday 25 September 2012 12:35 PM
download the demo of your gallery I liked it just download the source files to the mountain on your own server does not load the images
pruevas.softdataonline.com << "uploaded here"
Greetings ..!
Tuesday 25 September 2012 03:28 PM
Hello,
Please rename "js/imageFlip.mini.js" into "js/imageflip.mini.js" (CASE letter F) - Thanks for letting me know. I updated the file.
