網頁設計開發 – Hello Blog https://hellohim.com/blog Hello Blog Mon, 27 May 2019 16:36:41 +0000 en-US hourly 1 https://wordpress.org/?v=5.4.6 https://hellohim.com/blog/wp-content/uploads/2019/10/default-75x75.png 網頁設計開發 – Hello Blog https://hellohim.com/blog 32 32 jQuery Image Gallery : Fotorama https://hellohim.com/blog/jquery-image-gallery-fotorama/ https://hellohim.com/blog/jquery-image-gallery-fotorama/#respond Mon, 27 May 2019 16:36:41 +0000 https://hellohim.com/blog/?p=1914 Responsive + Mobile Friendly Javascript + CSS + jQuery Support arrow key navigation , full screen Demo : Code : Ref. https://fotorama.io/ https://github.com/artpolikarpov/fotorama/

The post jQuery Image Gallery : Fotorama appeared first on Hello Blog.

]]>
  • Responsive + Mobile Friendly
  • Javascript + CSS + jQuery
  • Support arrow key navigation , full screen

    • Demo :



    Code :

    <!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Fotorama from CDNJS, 19 KB -->
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

<div class="fotorama"
     data-keyboard="true"
     data-nav="thumbs"
     data-allowfullscreen="true">
  <img src="https://s.fotorama.io/1.jpg">
  <img src="https://s.fotorama.io/2.jpg">
</div>

    Ref.

    https://fotorama.io/

    https://github.com/artpolikarpov/fotorama/

    The post jQuery Image Gallery : Fotorama appeared first on Hello Blog.

    ]]>     https://hellohim.com/blog/jquery-image-gallery-fotorama/feed/ 0