jQuery プラグイン1 - イメージギャラリーを作成する
•Download as KEY, PDF•
1 like•1,247 views
This document provides steps to create an image gallery using the Galleria jQuery plugin. It includes links to resources on jQuery image galleries, downloading Galleria, and code samples to load Galleria, define an image gallery container with images, load a theme, and initialize Galleria on the container. The final code sample provided is a full HTML page with HEAD and BODY sections that implements an image gallery using Galleria.
More Related Content
What's hot
What's hot (17)
Similar to jQuery プラグイン1 - イメージギャラリーを作成する
Similar to jQuery プラグイン1 - イメージギャラリーを作成する (20)
More from Atsushi Tadokoro
More from Atsushi Tadokoro (20)
Recently uploaded
Recently uploaded (20)
jQuery プラグイン1 - イメージギャラリーを作成する
- 2. ‣ ‣
- 3. ‣ ‣ ‣ ‣
- 4. ‣ ‣ ‣
- 5. ‣ ‣ ‣ ‣ ‣
- 6. ‣ ‣ ‣
- 7. ‣ 100 jQuery Plugins for Image Galleries with Source Files (http://www.stunningmesh.com/2010/11/100-jquery- plugins-for-image-galleries-with-source-files/) ‣ 20+ jQuery Image Gallery for your next project (http:// webexpedition18.com/articles/20-jquery-image-gallery- for-your-next-project/) ‣ jQuery (http://otani- webs.com/blog/2010/06/gallery/) ‣ jQuery 224 (http://kachibito.net/web-design/224-image-jquery- collection.html)
- 9. ‣ ‣ ‣
- 12. ‣ ‣ (http://goo.gl/DIaqA) <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>My Image Gallery</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> </head> <body> </body> </html>
- 13. ‣
- 14. ‣ <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>My Image Gallery</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="galleria/galleria-1.2.5.min.js"></script> </head> <body> <script> if (Galleria) { $("body").text('Galleria works') } </script> </body> </html>
- 15. ‣
- 16. ‣
- 17. ‣ <body> <div id="gallery"> <img src="img/6078870103_469c4a558a_b.jpg" /> <img src="img/6078870297_eb7103b1e8_b.jpg" /> <img src="img/6081092566_3bd88e783d_b.jpg" /> <img src="img/6081783541_1b9408472a_b.jpg" /> <img src="img/6082318134_3f970f9706_b.jpg" /> <img src="img/6085378484_f6e479989c_b.jpg" /> </div> </body>
- 18. ‣ ‣ ‣ <body> <div id="gallery"> <img src="img/6078870103_469c4a558a_b.jpg" /> <img src="img/6078870297_eb7103b1e8_b.jpg" /> <img src="img/6081092566_3bd88e783d_b.jpg" /> <img src="img/6081783541_1b9408472a_b.jpg" /> <img src="img/6082318134_3f970f9706_b.jpg" /> <img src="img/6085378484_f6e479989c_b.jpg" /> </div> <script> Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); </script> </body>
- 19. ‣ ‣ <body> <div id="gallery"> <img src="img/6078870103_469c4a558a_b.jpg" /> <img src="img/6078870297_eb7103b1e8_b.jpg" /> <img src="img/6081092566_3bd88e783d_b.jpg" /> <img src="img/6081783541_1b9408472a_b.jpg" /> <img src="img/6082318134_3f970f9706_b.jpg" /> <img src="img/6085378484_f6e479989c_b.jpg" /> </div> <script> Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); $("#gallery").galleria({ width: 960, height: 600 }); </script> </body>
- 20. ‣ <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>My Image Gallery</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="galleria/galleria-1.2.5.min.js"></script> </head> <body> <div id="gallery"> <img src="img/6078870103_469c4a558a_b.jpg" /> <img src="img/6078870297_eb7103b1e8_b.jpg" /> <img src="img/6081092566_3bd88e783d_b.jpg" /> <img src="img/6081783541_1b9408472a_b.jpg" /> <img src="img/6082318134_3f970f9706_b.jpg" /> <img src="img/6085378484_f6e479989c_b.jpg" /> </div> <script> Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); $("#gallery").galleria({ width: 960, height: 600 }); </script> </body>
- 21. ‣
- 22. ‣ ‣ ‣ ‣ ‣ ‣
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n