logo DevAnswer - Developers Answer

Vertical Image Gallery Code with Preview on Hover

30th December

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
body {
    background-color: #3366CC;
}
.grande {
    width: 280px;
    max-height: 326px;
    height: auto;
    position: absolute;
    top: 8px;
    left: 74px;
    margin-bottom: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.mini {
    width: 48px;
    height: 48px;
    padding: 5px;
    margin-bottom: 5px;
    border: #BEBEBE solid 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
</style>

</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<img src="http://www.devanswer.com/img/vertical-slider-1.jpg" class="mini"/><br>
<img src="http://www.devanswer.com/img/vertical-slider-2.jpg" class="mini"/><br>
<img src="http://www.devanswer.com/img/vertical-slider-3.jpg" class="mini"/><br>
<img src="http://www.devanswer.com/img/vertical-slider-4.jpg" class="mini"/><br>
<img src="http://www.devanswer.com/img/vertical-slider-5.jpg" class="mini"/>
<img id="image1" src="http://www.devanswer.com/img/vertical-slider-1.jpg" class="grande"/><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(document).ready(function () {
    $('.mini').hover(function () {
        var img = $(this).attr('src');
        $('.grande').attr('src', img);
    });
});
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>                        



Other Codes