Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the hostinger-ai-assistant domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/irttsubu/webartinfo.com/wp-includes/functions.php on line 6260
Tutorial – Page 2 – Webartinfo | Creativity With Perfection
Notice: Function WP_Scripts::add was called incorrectly. The script with the handle "czgb-block-frontend-js" was enqueued with dependencies that are not registered: slick-carousel. Please see Debugging in WordPress for more information. (This message was added in version 6.9.1.) in /home/irttsubu/webartinfo.com/wp-includes/functions.php on line 6260

Category: Tutorial

Posted on by — 4 Comments

Scaling Images With Jquery (Resize Image on Hover)

Jquery

Using only JQuery you can use the hover() listener for mouseenter and mouseleave events and manage the CSS properties also with JQuery using css() method. For scaling an element you can use the CSS transition in conjunction with transform: scale(<some_number>) properties. Check next example for better understanding:

HTML :

<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="col-lg-6 order-lg-2">
   <div class="img-wrapper p-5 text-center bg-info">
     <img class="img-fluid rounded-circle" src="https://picsum.photos/200/300/?random" alt="Askbootstrap.com">
   </div>
</div>

Javascript/Jquery:

$(document).ready(function()
{
    $(".img-wrapper").find("img").css("transition", "transform 500ms ease-in-out");

    $(".img-wrapper").hover(    
        // Handler for mouseenter
        function()
        {
            $(this).find("img").css("transform", "scale(1.2)");
        },
        // Handler for mouseleave
        function()
        {
            $(this).find("img").css("transform", "scale(1)");
        }
    );
});

Output:

Posted on by — Leave a comment

How to create an image gallery using jQuery Lightbox plugin?

How to create an image gallery using jQuery Lightbox plugin?

Image gallery on a website is a popular trend because it adds up extra beauty. In case of photography and travel related websites, image gallery has no alternative. If your website has some photos to be displayed for your visitors, image gallery is the way to go. You can design such an image gallery anyway you want but designing image gallery using Lightbox jQuery plugin makes it easier for you. It has a default design that you can use or you can style it in the code. Lightbox saves your time and effort providing a great looking image gallery at the same time.

In a previous article, we introduced some of the free image gallery plugins. Today we will show how you can create an image gallery using Lightbox jQuery plugin in just three simple steps. Follow each step carefully.

Creating an Image Gallery using Lightbox

Shaping an image gallery using Lightbox is very simple. You will not have any trouble if you go through our instructions. First of all, let me describe what we need for that

Step 1:

Every photo you will use in your design has two different sizes. Design your gallery with smaller size photos. Style them any way you want. When you have designed the gallery, wrap each photo with an anchor tag and place bigger high-resolution photos in their src. Bigger photos are the photos which will appear in modal upon clicking on them individually. Just like the codes below.

<a href="/images/im0101.png" > <img src="/images/im01.png" alt=""></a>

<a href="/images/im0202.png" > <img src="/images/im02.png" alt=""></a>

<a href="/images/im0303.png" > <img src="/images/im03.png" alt=""></a>

<a href="/images/im0404.png" > <img src="/images/im04.png" alt=""></a>

Step 2:

All of your images are wrapped in links redirecting to their high-resolution ones. Now you need to use Lightbox for modal window behavior. Go to this link to download Lightbox. Unzip the file and find  lightbox.css and lightbox.js file.

Include the CSS file at the top of your page in your <head> tag

<link href="/css/lightbox.css" rel="stylesheet">

and Include the Javascript at the bottom of your page just before the closing </body> tag.

<script src="/js/lightbox.js"></script>

Be sure that the four images loaded by lightbox.css are in the correct locations. Check the path in the lightbox.css file. Make changes if they are not in the right paths.

Step 3:

Now you need to add data-lightbox attributes to the images you want to have modal behavior upon clicking on them. You can either use a unique name for each of the images or group some of them with a name.

Unique

<a href="/images/im0101.png" data-lightbox="image01" data-title="Jack"> <img src="/images/im01.png" alt=""></a>

Group

<a href="/images/im0101.png" data-lightbox="vacation" data-title="Jack"> <img src="/images/im01.png" alt=""></a>

<a href="/images/im0202.png" data-lightbox="vacation" data-title="Dave"> <img src="/images/im02.png" alt=""></a>

<a href="/images/im0303.png" data-lightbox="vacation" data-title="robbert"> <img src="/images/im03.png" alt=""></a>

<a href="/images/im0404.png" data-lightbox="vacation" data-title="Mgreen"> <img src="/images/im04.png" alt=""></a>

You also can add a caption at the bottom of the image just by adding data-title attribute in that particular image.

<a href="/images/im0404.png" data-lightbox="image01" data-title="Mgreen"> <img src="/images/im04.png" alt=""></a>

Check the demo of the similar Lightbox image gallery you are going to create.

You are done with your Lightbox image gallery. Make any changes you want but make sure you follow all the processes. If you have gone through our instructions, you are quite capable of making any such Lightbox image gallery. It’s very simple and you did it. Bingo!

 

Source: Themehunt