edit-article

Article Description: overview - galleria - image gallery, slideshow

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;">galleria - image gallery control</h1> <h2>[WHAT]</h2> <ol style="font-size: 10px; font-weight: normal; text-align: start;"> <li>] application (plug in) - for displaying images in an image gallery viewer (aka lightbox), &nbsp;free and open source(mit)&nbsp;</li> </ol> <h2>[WHY]</h2> <ol style="font-size: 10px; font-weight: normal; text-align: start;"> <li>] thumbnail image strip - navigate between images by using clicking the thumbnail preview</li> <li>] big nav arrows - forward, back - centered vertically, on the left and right of edges of each image</li> <li>] info icon - displays feild "", optional</li> <li>] full screen -&nbsp;</li> <li>] full api - can configure setup options, control player thru code, extend&nbsp;</li> </ol> <h2>[WHERE]</h2> <ol style="font-size: 10px; font-weight: normal; text-align: start;"> <li>*] newest version (1.3) mobile (touch) features look great&nbsp;</li> <li>*] several optional($29) themes to choose from also look good, save yourself some dev time and get premium support</li> <li>] &nbsp;&nbsp;</li> </ol> <h2>[WHEN]</h2> <ol style="font-size: 10px; font-weight: normal; text-align: start;"> <li>]</li> </ol> <h2>[EXAMPLE]</h2> <ol style="font-size: 10px; font-weight: normal; text-align: start;"> <li>] forest-of-dreams.sospep.com/view/gallery - &nbsp;</li> </ol> <h2>[HOW-TO]</h2> <ol style="font-size: 10px; font-weight: normal; text-align: start;"> <li>] SITE dload / install files locally or use link to CDN</li> <li>] PG add link to galleria theme css file</li> <ol> <li>*] themes have both css and js files&nbsp;</li> </ol> <li>] PG add link to galleria js file</li> <li>] PG load your 'content images' in a "galleria" div</li> <ol> <li>use thumbnails</li> <li>use large images</li> <li>add descriptions</li> </ol> <li>] PG add/call script to initialize Galleria</li> <ol> <li>*] following the example code on their website was initially getting an error=&nbsp;</li> </ol> <li>] PG configure options</li> <ol> <li>]&nbsp;</li> </ol> <li>] PG customize&nbsp;</li> <ol> <li>] using 'extend' to customize, create your own theme</li> </ol></ol> <h2>[REFERENCE]</h2> <ol style="font-size: 10px; font-weight: normal; text-align: start;"> <li>] <a href="location?id=289" target="_blank">my galleria links</a>&nbsp;- home, api, prb setu @ stack , mobile demo</li> </ol>