jQuery Plugin to Embed Giphy Images

The Giffy Gallery is a jQuery & Bootstrap-powered plugin to embed Giphy images on websites. It use the GIPHY API to get animated images with specific tag / keyword from Giphy. The plugin also lets users add categories (from the front-end) from which it loads gif images.

How to Use jQuery Giffy Gallery

1. Load the jQuery and Bootstrap CSS into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

2. Also, include Giffy Gallery CSS and JavaScript file in your webpage.

<!-- Giffy Gallery CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">

<!-- Giffy Gallery Js -->
<script type="text/javascript" src="assets/javascript/app.js"></script>

3. Create HTML structure for Gallery as follows.

<div id="divGallery" class="container">
   <div class="row">
      <div id="divButtons" class="col col-lg-12"></div>
   </div>
   <div class="row">
      <div class="col col-lg-7 text-center m-3">
         <input type="text" class="mb-1" id="txtCategory" maxlength="20">
         <button id="btnSaveCategory" class="btn btn-info">Add Category</button>
      </div>
      <div class="col col-lg-4 text-center m-3">
         <button id="btnReset" class="btn btn-danger invisible">Clear Giffs</button>
         <button id="btnDelLocal" class="btn btn-danger invisible">Delete User Buttons</button>
      </div>
   </div>
</div>

4. The basic CSS styles to customize the overall gallery page.

body{
    background-color: gray;
    background-image: url("../images/grey_wash_wall.png");
    height:100%;
}
header{
    border-bottom: 2px solid #66ffff;
}
img{
    width:100%;height:auto;
}
.card{
    cursor:pointer;
    width:100%;
}
.col-md-2{
    min-width: 150px;
}

@media screen and (max-width:667px){
    ul{
        padding-left:1px;
    }
    .container{
        margin-bottom:160px;
    }
    .display-5{
        font-size: 10px;
    }
}

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.