Wrapping <li> with <a> tags in slideshow
I am trying to wrap images with tags inside list items that are part of a slideshow and have problems with it working. does anyone have any input? not sure if i wrap my image it breaks the javascript code, but i find it hard to wrap it, or maybe i'm leaving here ... I'm just fine creating a mouseover for swapping images, but not sure if the tag wrapping .. 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>');
},
+3
source to share
1 answer
Create an array of 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, expand on mouseleave.
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: Twist double wrapped in another. Now fixed
+1
source to share