Difference between revisions of "Team:BOKU-Vienna/Plant"

Line 97: Line 97:
 
             </div>
 
             </div>
 
         </div>  
 
         </div>  
 +
<meta charset="utf-8">
 +
<title>My page</title>
 +
 +
<!-- CSS -->
 +
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
  
 
     </header>
 
     </header>
Line 112: Line 117:
 
                   <img id="imgAnimate1" src="https://static.igem.org/mediawiki/2017/0/04/T--BOKU-Vienna--Michi_komp.jpg" alt="test"  class="img-circle teammember bgscroll" >
 
                   <img id="imgAnimate1" src="https://static.igem.org/mediawiki/2017/0/04/T--BOKU-Vienna--Michi_komp.jpg" alt="test"  class="img-circle teammember bgscroll" >
 
                   </a> <p> Michael </p>
 
                   </a> <p> Michael </p>
−
                    
+
                   <a href="image.jpg" data-fancybox data-caption="My caption">
 +
<img src="thumbnail.jpg" alt="" />
 +
</a>
 +
<h2>fancyBox v3.1 - Images</h2>
 +
 
 +
<h3>Single image</h3>
 +
 
 +
<p>
 +
  Add a <code>data-fancybox</code> attribute to any image link to enable fancyBox.
 +
</p>
 +
 
 +
<p>
 +
  <a href="https://farm4.staticflickr.com/3953/15594397982_477385f90d_b_d.jpg" data-fancybox>
 +
    <img src="https://farm4.staticflickr.com/3953/15594397982_477385f90d_m_d.jpg" />
 +
  </a>
 +
</p>
 +
 
 +
 
 +
<h3>Image gallery</h3>
 +
 
 +
<p>
 +
  Galleries are created by adding the same <code>data-fancybox</code> attribute value.
 +
</p>
 +
 
 +
<p>
 +
 
 +
  <a href="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" data-fancybox="images">
 +
      <img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" />
 +
  </a>
 +
 
 +
  <a href="https://c2.staticflickr.com/6/5499/30972532232_051e1dc57e_h.jpg" data-fancybox="images">
 +
      <img src="https://c2.staticflickr.com/6/5499/30972532232_e9a298a0c5_m.jpg" />
 +
  </a>
 +
 
 +
  <a href="https://c1.staticflickr.com/9/8021/29345513551_0c565462d8_k.jpg" data-fancybox="images">
 +
      <img src="https://c1.staticflickr.com/9/8021/29345513551_16024a89e3_m.jpg" />
 +
  </a>
 +
 
 +
</p>
 +
 
 +
 
 +
<h3>Gallery with one preview image</h3>
 +
 
 +
<p>
 +
  To show only one or a few images but have a large gallery, simply hide the rest of the links. <br />
 +
  Optionally, use <code>data-thumb</code> for thumbnail image.
 +
</p>
 +
<p>
 +
    <a href="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h.jpg" data-fancybox="images-preview">
 +
      <img src="https://c1.staticflickr.com/1/357/31876784275_fbc9696913_m.jpg" />
 +
    </a>
 +
</p>
 +
 
 +
<div style="display: none;">
 +
 
 +
  <a href="https://farm3.staticflickr.com/2947/33594572585_b48eba935b_k_d.jpg" data-fancybox="images-preview"
 +
    data-thumb="https://farm3.staticflickr.com/2947/33594572585_46ca00f3a5_m_d.jpg"></a>
 +
 
 +
  <a href="https://farm3.staticflickr.com/2859/33395734202_522f9d8efd_k_d.jpg" data-fancybox="images-preview"
 +
    data-thumb="https://farm3.staticflickr.com/2859/33395734202_15a81c4ef3_m_d.jpg"></a>
 +
 
 +
</div>
 +
 
  
 
                 </div>
 
                 </div>
Line 121: Line 188:
 
     </section>
 
     </section>
 
 
 +
<!-- JS -->
 +
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
 +
<script src="jquery.fancybox.min.js"></script>
  
 
</html>
 
</html>

Revision as of 10:49, 12 July 2017

Plant Synthetic Biology

V
My page

Plant Synthetic Biology

Still under construction.

test

Michael

fancyBox v3.1 - Images

Single image

Add a data-fancybox attribute to any image link to enable fancyBox.

Image gallery

Galleries are created by adding the same data-fancybox attribute value.

Gallery with one preview image

To show only one or a few images but have a large gallery, simply hide the rest of the links.
Optionally, use data-thumb for thumbnail image.