Dyalog MiServer 3 Sample Site

jBox Widget - Advanced sample: Image Galleries

Larger image on click

Hover over these images and click them for a gallery-view in full size. Notice how you can browse the gallery with the arrow-left/right-keys!

NB: Grey/Coloring is not a jBox-Effect, pure CSS-Styling!

:Class jBoxAdvancedImages : MiPageSample 
⍝ Control::     _JS.jBox 
⍝ Description:: Image-galleries with jBox 
 
    ∇ Compose;tab;jTab;dt;columns;ocw;dd;daSpan;NiceDiv;t3 
      :Access public 
       
 
      Add _.h2'jBox Widget - Advanced sample: Image Galleries' 
      
      
      Add _.h4'Larger image on click' 
      Add _.p'Hover over these images and click them for a gallery-view in full size. Notice how you can browse the gallery with the arrow-left/right-keys!' 
      Add _.p'NB: Grey/Coloring is not a jBox-Effect, pure CSS-Styling!' 
 
    ⍝ following css-stuff for gray images that show colors on MouseOver! 
      Add _.Style ScriptFollows 
     ⍝.demo-img1 { 
     ⍝   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 
     ⍝   -webkit-filter: grayscale(100%); 
     ⍝   -moz-filter: grayscale(100%); 
     ⍝   -ms-filter: grayscale(100%); 
     ⍝   filter: grayscale(100%); 
     ⍝   filter: gray; /* IE 6-9 */ 
     ⍝   margin: 10px; 
     ⍝   transition: 1s; 
     ⍝} 
     ⍝.demo-img1:hover { 
     ⍝   -webkit-filter: none; 
     ⍝   -moz-filter: none; 
     ⍝   -ms-filter: none; 
     ⍝   filter: none; 
     ⍝} 
      
 
     ⍝ Careful: must create images first, jBox thereafter, so that it finds something to work on! 
      Add ScriptFollows 
     ⍝<a href="../Data/pic1.png" data-jbox-image="gallery1" class="demo-img1" title="The beauty of sum-reduction"> 
     ⍝<img src="../Data/pic1_thumb.png" alt=""></a> 
     ⍝<a href="../Data/pic2.png" data-jbox-image="gallery1" class="demo-img1" title="Dyalog Duck"> 
     ⍝<img src="../Data/pic2_thumb.png" alt=""></a> 
     ⍝<a href="../Data/pic3.png" data-jbox-image="gallery1" class="demo-img1" title="Creating RNA to match a DNA is easier in APL than in the lab!"> 
     ⍝<img src="../Data/pic3_thumb.png" alt=""></a> 
      dd←'#imgs'Add _.jBox'Image' 
      dd.ScriptOptions←1 1 0 
    ∇ 
:EndClass 

Controls used on this page: Dyalog: Style JavaScript: jBox Base HTML: h2, h4, p