Discussion Forums  >  WebViews and HTML for Mobile

Replies: 13    Views: 439

ceerup
Code is Art
Profile
Posts: 1033
Reg: Oct 10, 2011
New York City
16,380
06/16/12 07:54 PM (11 years ago)

JQuery Image Gallery Tutorial

1) Go to photoswipe.com scroll down and click download 2) extract folder 3) Import all the .js and .css files into your BT_Docs folder 4) Examine each of the examples in the .html files and play around with them. you can customize it however you want if you know html, java, css. I recommend opening the jquerymobileAJAX.html and look through that. That is the "Main" code. that is what will provide the screen list menus Also check out the gallery1 and gallery2.html files. if your creating a bunch of menus with different pictures, you will need different html files for each screen. and will have to be coded like that for the "main" page to see also dont forget, all your images should go into the BT_Doc folder (thats what i do) but if you have a ton of pictures i HIGHLY recommend you use URLs to your images, (I use dropbox). That way your app isnt a large file. If you have any questions feel free to ask. The Image gallery is very nice and and you can add captions, theres a play button to play through your images. the main page will look something like this, ofcourse you can customize it as long as you are good with coding, add as many lists as you want, as many pictures you want. heres what the main page looks like, the menus arent clickable because its not connected to anything right now http://dl.dropbox.com/u/79684434/05-jquery-mobile-ajax.html
 
Fred@mySkylla com
Android Fan
Profile
Posts: 5259
Reg: Oct 03, 2011
location unknow...
62,560
like
06/16/12 08:03 PM (11 years ago)
Excellent
 
ceerup
Code is Art
Profile
Posts: 1033
Reg: Oct 10, 2011
New York City
16,380
like
06/16/12 08:17 PM (11 years ago)
thanks fred, i figure i should help out some more. especially since alot of people have had problems with the image gallery plugin. this is pretty simple and has a nice neat look to it. plus with customization you can use it to just make photo apps or wall paper apps with just jQuery. the sky is the limit!
 
MacApple
Apple Fan
Profile
Posts: 4674
Reg: Oct 25, 2010
USA
61,140
like
06/16/12 08:18 PM (11 years ago)
Will have a play around this week, good man.
 
GoNorthWest
buzztouch Evangelist
Profile
Posts: 8197
Reg: Jun 24, 2011
Oro Valley, AZ
1,000,000
like
06/16/12 08:32 PM (11 years ago)
Nice job! Way to pay it forward!
 
ceerup
Code is Art
Profile
Posts: 1033
Reg: Oct 10, 2011
New York City
16,380
like
06/16/12 08:46 PM (11 years ago)
thanks guys!
 
Sandeep
Android Fan
Profile
Posts: 1260
Reg: Feb 01, 2012
Miraj, India
25,250
like
06/17/12 12:52 AM (11 years ago)
Hello brother, yesterday I implemented the codes successfully in my gallery page and now it works like a charm. Thanks for the tutorial.
 
ceerup
Code is Art
Profile
Posts: 1033
Reg: Oct 10, 2011
New York City
16,380
like
06/17/12 01:01 AM (11 years ago)
hey sandeep, im glad you did it, let me know when your done so i can check it out!
 
Sandeep
Android Fan
Profile
Posts: 1260
Reg: Feb 01, 2012
Miraj, India
25,250
like
06/17/12 01:03 AM (11 years ago)
yes of course. my new app will be ready for release within next sunday and you would be the first 1 to test it before the release.
 
ceerup
Code is Art
Profile
Posts: 1033
Reg: Oct 10, 2011
New York City
16,380
like
06/17/12 01:04 AM (11 years ago)
awesome! cant wait to check it out!
 
rational
Apple Fan
Profile
Posts: 10
Reg: Jun 01, 2012
location unknow...
3,700
like
06/17/12 01:35 AM (11 years ago)
Great work and very professional tutorial Many Thanks :)
 
ceerup
Code is Art
Profile
Posts: 1033
Reg: Oct 10, 2011
New York City
16,380
like
06/17/12 08:04 AM (11 years ago)
thank you rational
 
mrDavid
BTMods.com
Profile
Posts: 3936
Reg: May 21, 2011
San Diego, CA
51,910
like
06/23/12 07:48 PM (11 years ago)
I didn't subscribe to this one?! Awesome find @ceerup! David buzztouchmods.com
 
ceerup
Code is Art
Profile
Posts: 1033
Reg: Oct 10, 2011
New York City
16,380
like
06/24/12 01:44 AM (11 years ago)
thanks!
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.