preview.js is a 'small' jQuery library that previews the value of an element on hover. Currently there are no extra options or functions.
element.on('mouseover' + namespace, opts.eventSelector, function(e) {
$("#plaatje").attr("src",$(this).data(opts.dataKey));
});
}This short piece of code is written to improve my jQuery skills. It’s an assignment for Fontys Hogescholen ICT & Media Design.
Add jQuery and the prieview.js file to your HTML page
<head>
<script type="text/javascript" src=“preview.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>Make an image element and call it the id “plaatje”. Give a your image a placeholder in the img src.
<body>
<img id="plaatje" style="height:100px;" src="img/klein.png"/>
</body>Make an html list and give them a data tag with the image you want to preview.
<body>
<ul>
<li data-preview-image="img/stuart.jpg">Stuart</li>
<li data-preview-image="img/kevin.jpg">Kevin</li>
<li data-preview-image="img/bob.jpg">Bob</li>
</ul>
</body>Call the preview function just below your closing body tag.
<script>
var previewImage = new previewImage();
previewImage.init();
</script>Iris van Stiphout
N/A