javascript - Galleria using full size images instead of thumbnails -


When I observe the element, it indicates that Galleria is using a full-sized image instead of the thumbnail .

Example from Galleria documentation

  & lt; Div class = "galleria" & gt; & Lt; A href = "/ img / large1.jpg" & gt; & Lt; Img src = "/ img / thumb1.jpg" data-title = "my title" data-description = "my description" & gt; & Lt; / A & gt; & Lt; A href = "/ img / large2.jpg" & gt; & Lt; Img src = "/ img / thumb2.jpg" Data-Title = "Other Title" Data-Details = "My & lt; em & gt; HTML & lt; / em> Details" & gt; & Lt; / A & gt; & Lt; / Div & gt;   

My code is

  & lt; Div class = "galleria" & gt; & Lt; A href = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/812px-3D_Schildersdoek.JPG" & gt; & Lt; Img src = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/220px-3D_Schildersdoek.JPG" alt = "" /> & Lt; / A & gt; & Lt; A href = "Actiteepi://aplodkvikimediakorg/vikipeedia/comns/thnb/0/02/bitwa_pod_grunwaldem_muziam_nrodove_05kjpg/800px-bitwa_pod_grunwaldem_muziam_nrodove_05kjpg" & gt; & Lt; Img src = "Actiteepi://aplodkvikimediakorg/vikipeedia/comns/thnb/0/02/bitwa_pod_grunwaldem_muziam_nrodove_05kjpg/300px-bitwa_pod_grunwaldem_muziam_nrodove_05kjpg" alt = "" / & gt; & Lt; / A & gt; & Lt; / Div & gt;   

There is a link to jsfiddle for the demo

How can I use thumbnail images instead of full size images in the gallery?

Key point is data-large feature define gallery items like this

a href = "thumb image. jpg" and IMG src = "thumb image. JPG and data-largest =" LARGEIMAGE. Jpg "

  
& lt; a href =" thumb image. Jpg "& gt; & lt; img src =" ThumbImage.jpg "data-large =" LargeImage.jpg "data-title =" my title "data-description =" my description "/> / a & gt; & lt; a href = "ThumbImage.jpg" & gt; & lt; img src = "ThumbImage.jpg" data-Big = "Braimjkjepiji" data-title = "my title" data-description = " Try the update version below
    . & Lt ;! DOCTYPE html> 
gt; link type = "text / css" href = "gallaria / themes / classic / galleria. Classic.css "media =" screen "rel =" stylesheet "/>
script src =" http://code.jquery.com/jquery-1.8.3.min.js "& gt; & lt; ; / Script & gt; & nbsp; script src = "Galleria / Galleria-1.3.6.min.js"> gt; & gt; & gt; & lt; body & gt; ; & lt; div class = "Galleria" & gt; & lt; a href = "http://upload.wikimedia.org/wikipedia/commons/th UMB / 2 / 2f / 3D_Schildersdoek.JPG / 220px-3D_Schildersdoek.JPG "& gt; & Lt; img src =" http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/220px-3D_Schildersdoek.JPG "data-largest =" http: // Upload.wikimedia.org /wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/812px-3D_Schildersdoek.JPG "Data-Title =" My Title "Data-Details =" My Work Not "/ & gt; & Lt; / a & gt; & Lt; a href =" http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/300px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG "& gt; & Lt; img src =" http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/300px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG "data-largest =" http: // upload.wikimedia.org /wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/800px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG "data-title =" other titles "data-description =" My & lt; Em> HTML & lt; / Em> Description "/> gt; & gt; / div> & lt; script type =" text / javascript "& gt; $ (document) .ready (function () {Galleria.loadTheme ( 'Galleria / themes / classic / galleria.classic.min.js'); $ () Galleria ({width 'Galleria.' :. 350, height: 315, ThumbCrop: "height", Lightbox: true}); Galleria .r ('. Gallaria');});

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -