Downloaded 28 times
Uploaded byAtsushi Tadokoro
jQueryプラグイン フォトギャラリーを作成する - 芸大Webデザイン演習B
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 snippets to import Galleria, add images to the gallery container, apply a theme, and initialize the gallery with options. The full code example sets up a basic image gallery with six images using Galleria.
More Related Content
jQueryプラグイン フォトギャラリーを作成する - 芸大Webデザイン演習B
- 2.
- 3.
- 4.
- 5.
- 6.
- 7. ‣ 100 jQueryPlugins 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)
- 8.
- 9.
- 10.
- 11.
- 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> <divid="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.