Let's have fun

Let's have fun

Images

Info

In addition to some standard helpers, this framework also has thumbnails with popup and a simple slideshow.

The helpers

Class Description 
image
 Makes the image responsive 
image-max
 Makes the image responsive and full size 
image-hover
 Gives a hover effect to the image 
image-center
 Centers the image

HTML code

<img alt="" class="image" src="">
<img alt="" class="image-max" src="">
<img alt="" class="image image-hover" src="">
<img alt="" class="image image-center" src="">

Thumbnails and popups

thumbnail thumbnail thumbnail
popup
popup
popup

The thumbnails classes

thumbnail
thumb

To open the popup:

data-popup-open="image-1"

Where the number is the popup and therefore increases!

<img alt="thumbnail" class="thumb" src="thumb.jpg" data-popup-open="image-1">

The popup classes

popup
popup-inner
image-max
popup-close

From the popup thumbnail point:

data-popup="image-1"

close Popup:

data-popup-close="image-1"
<div class="popup" data-popup="image-1" data-popup-close="image-1">

<div class="thumbnail fit-content box-center">
  <img alt="thumbnail" class="thumb" src="thumb.jpg" data-popup-open="image-1" />
  <img alt="thumbnail" class="thumb" src="thumb.jpg" data-popup-open="image-2" />
</div>

<div class="popup" data-popup="image-1" data-popup-close="image-1">
  <div class="popup-inner">
    <img alt="popup" class="image-max" src="thumb.jpg" />
    <a class="popup-close" data-popup-close="image-1" href="javascript:void(0);"></a>
  </div>
</div>

<div class="popup" data-popup="image-2" data-popup-close="image-2">
  <div class="popup-inner">
    <img alt="popup" class="image-max" src="thumb.jpg" />
    <a class="popup-close" data-popup-close="image-2" href="javascript:void(0);"></a>
  </div>
</div>

Slideshow

slider
next
prev
<div class="slider">
  <div style="display: inline-block"><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <div><img src="" alt=""></div>
  <button class="next"></button>
  <button class="prev"></button>		
</div>