creating a link to images

I am trying to create a jquery code which can wrap an img tag with a link:

My code is like this:

http://prntscr.com/iuw6hc

I will paste my HTML here but basically it is a loop of many items showing within each col.

<div class="car-item gray-bg text-center first" style="height: 357px;">        
        <div class="car-image">            
            <img class="img-responsive" src="http:///wp-content/uploads/2018/03/20180214_090633-265x190.jpg" alt="" width="265" height="190">            
            <div class="car-overlay-banner">
                <ul>
                    <li><a href="http:///cars/chevrolet-silverado-1500-lt-z71/" data-toggle="tooltip" title="" data-original-title="View"><i class="fa fa-link"></i></a></li>

I am trying like this:

var wrapped = false;
    var original = $(".img-responsive");

    $(".img-responsive").click(function(){
        if (!wrapped) {
            wrapped = true;
            var gURL = $('.car-overlay-banner').find('a').attr('href');
            $(".img-responsive").wrap("<a href=\"'+ gURL +'\"></a>");
        }
    });

    $(".img-responsive").click(function(){
        if (wrapped) {
            wrapped = false;
            $(".img-responsive").parent().replaceWith(original);
        }
    });

Trying to use a href of car overlay to apply to the image too.

2 answers

  • answered 2018-03-22 17:26 Prakash Jethava

    jQuery provides a method named "wrap()", which can be used to insert any HTML structure in set of matched elements. In simple words, if you want put wrapper around your div element then you can use wrap() method. For example, you have a div with ID "Child".

    <div id="Child"></div>
    

    And want to wrap this div with any parent then you can use "wrap()" method to insert HTML.

    $('#Child').wrap('<div id="Parent"></div>');
    
    <div id="parent">
      <div id="child"></div>
    </div>
    

    Same way, we will use the wrap() method to insert hyperlink to image tag so that the image becomes clickable. See below.

    $(document).ready(function() {
        $("#imgLogo").wrap('<a href="http://jquerybyexample.blogspot.com/"></a>');
    });
    

    In this example, I have used ID as selector but you can use class selector to find all the images with same class and then wrap them with tag. You can also assign target="_blank" in the above tag to open the link in new window.

  • answered 2018-03-22 17:26 Mr.ZZ

    I think you need code like this?

        var wrapped = false;
        var original = $(".img-responsive");
    
        $(".img-responsive").click(function(){
            if (!wrapped) {
                var wrapped = true;
    
                // find link href in .car-image(img-responsive's parent) 
                var gURL = $(this).parent().find('a').attr('href');
    
                // use $(this) instead of $(".classname") to apply link only clicked image
                $(this).wrap("<a href=\""+ gURL +"\"></a>");
            }
        });
    
        $(".img-responsive").click(function(){
            if (wrapped) {
                var wrapped = false;
                $(this).parent().replaceWith(original);
            }
        });