search

longmeaghan / ml_portfolio

0 stars 0 forks source link

Feature/lightgallery #38

Closed wellcda closed 6 years ago

wellcda commented 6 years ago

Issue #29

Implements lightgallery according to the layout below.

image

Example

Everytime a lightgallery is created it must receive an unique id and be activated in the scripts tag at the end of the body tag.

<body>
    <div id="lightgallery-1" class="lightgallery">
      <a href="../img/rectangle.png">
        <img src="../img/rectangle.png" />
      </a>
    </div>

    <div id="lightgallery-2" class="lightgallery">
      <a href="../img/circle.png">
        <img src="../img/circle.png" />
      </a>
    </div>

    <script type="text/javascript">
      $(document).ready(function() {
          $("#lightgallery-1").lightGallery();
          $("#lightgallery-2").lightGallery();
      });
    </script>
</body>
longmeaghan commented 6 years ago

Only thing that it is pushing all of the image together in the preview creating a squish. Not sure if it's possible to allow cropping of some in the center. Other wise it looks really good!

screen shot 2018-08-04 at 1 45 37 pm
wellcda commented 6 years ago

Oh, that's because I've set all the lightgallery images to have and width of 260px and height of 220px.

For now the easiest way to prevent the squishing is creating the thumbnails using another software since the images may have a different resolution. After that we can reference the thumbnails in the img tag while the a tag has the original one linked in its href property. 

<a href="../img/img-original.png">
    <img src="../img/img-thumbnail-260x220.png" />
</a>
longmeaghan commented 6 years ago

Alright got it. I'm going to make the merge then. (whoo-hoo!)