CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Torsten
Torsten

Reputation: 91

Preview corresponding image in gallery on hover with jQuery

I have several images and when I hover over one of the many icons I only want to show the corresponding image as a sort of preview which is hidden in the CSS.

The HTML can not be changed unfortunately. Also i have to do this with JS/jQuery.

At the moment all images showing up on hover. Obviously that is stupid!

Hope that makes sense? Thanks so much for your help! Cheers!

Torsten

HTML:

<style type="text/css">
.previewBox img {
    display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div>
<span class="cell name">
    <img class="downloadIcon" src="1s.jpg" alt="Download">
    <a class="download-a" href="#">Test1</a>
</span>
<span class="cell size">(1212 KB)</span>
<div class="previewBox">
    <img src='1.jpg'>
</div>

<span class="cell name">
    <img class="downloadIcon" src="2s.jpg" alt="Download">
    <a class="download-a" href="#">Test2</a>
</span>
<span class="cell size">(900 KB)</span>
<div class="previewBox">
    <img src='2.jpg'>
</div>

<span class="cell name">
    <img class="downloadIcon" src="3s.jpg" alt="Download">
    <a class="download-a" href="#">Test3</a>
</span>
<span class="cell size">(1500 KB)</span>
<div class="previewBox">
    <img src='3.jpg'>
</div>
</div>

<!-- hover preview js -->
<script type="text/javascript" src="hover-preview.js"></script>

JS:

$('.cell').hover(function() {
    $('.previewBox img').fadeToggle("fast", "linear");
});

Upvotes: 2

Views: 139

Answers (1)

vinayakj
vinayakj

Reputation: 5681

$(function(){
    $('.cell').hover(function() {
        $(this).siblings('.previewBox').find('img').fadeToggle("fast", "linear");
    });

})
.previewBox img {
        display:none;
    }
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- hover preview js -->
    <script type="text/javascript" src="hover-preview.js"></script>

    <div>
    <span class="cell name">
        <img class="downloadIcon" src="1s.jpg" alt="Download">
        <a class="download-a" href="#">Test1</a>
    </span>
    <span class="cell size">(1212 KB)</span>
    <div class="previewBox">
        <img src='1.jpg'>
    </div>
</div>
<div>
    <span class="cell name">
        <img class="downloadIcon" src="2s.jpg" alt="Download">
        <a class="download-a" href="#">Test2</a>
    </span>
    <span class="cell size">(900 KB)</span>
    <div class="previewBox">
        <img src='2.jpg'>
    </div>
</div>
<div>
    <span class="cell name">
        <img class="downloadIcon" src="3s.jpg" alt="Download">
        <a class="download-a" href="#">Test3</a>
    </span>
    <span class="cell size">(1500 KB)</span>
    <div class="previewBox">
        <img src='3.jpg'>
    </div>
    </div>

Upvotes: 1

Related Questions