CODEWITHSUNDEEP
javascriptjqueryhtml
Mitch Barlow
Mitch Barlow

Reputation: 131

wrapping <li>'s with <a> tags in a slideshow

I am attempting to wrap images with a tags inside list items that are part of a slideshow, and having problems getting it to work. does anyone have some input? not sure if once I wrap the image, it will break the javascript code, but I am having a tough time getting it to wrap, or maybe I am way off here... I do just fine creating the mouseover to swap the images, but not sure on wrapping the a tag...any help would be great!

html

<div id="container" class="cf">
    <div id="main" role="main">
       <section class="slider">
          <div class="flexslider">
             <ul class="slides">
                 <li class="slide-link-1" data-thumb="imgs/landing-page/slider-img-1.jpg">
                     <img src="imgs/landing-page/slider-img-1.jpg" />
                 </li>
                 <li data-thumb="imgs/landing-page/slider-img-2.jpg">
                     <img src="imgs/landing-page/slider-img-2.jpg" />
                 </li>

jquery

$('.slide-link-1 img').on({'mouseover' : function() {
      $(this).contents().wrap('<a href="',google.com,'"/></a>');  
},

Upvotes: 2

Views: 165

Answers (1)

Aramil Rey
Aramil Rey

Reputation: 3475

Make an array of the links like this:

var links = [];
links = ['google.com', 'doodle.com', 'booble.com'];

Then, count how many elements are above the one you are hovering and use that as an index, wrap on mouseenter, unwrap on mouseleave.

JS Fiddle

var links = [];
links = ['google.com', 'doodle.com', 'booble.com'];

$('li.slide-link > img').on({
    mouseenter: function () {
        var i = $(this).parent().index('.slide-link');
        $(this).wrap('<a href="' + links[i] + '"></a>');
    },
    mouseleave: function () {
        $(this).unwrap();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
    <li class="slide-link" data-thumb="imgs/landing-page/slider-img-1.jpg">
        <img src="imgs/landing-page/slider-img-1.jpg" />
    </li>
    <li class="slide-link" data-thumb="imgs/landing-page/slider-img-1.jpg">
        <img src="imgs/landing-page/slider-img-1.jpg" />
    </li>
    <li class="slide-link" data-thumb="imgs/landing-page/slider-img-1.jpg">
        <img src="imgs/landing-page/slider-img-1.jpg" />
    </li>
</ul>

EDIT: Hovering twice wrapped the with another . Now fixed

Upvotes: 1

Related Questions