JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title id="title"></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/nivo-zoom.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.nivo.zoom.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<div id="main">
<a href="images/monstersinc_large.jpg" class="nivoZoom">
<img src="images/monstersinc.jpg" alt="">
</a>
<a href="images/nemo_large.jpg" class="nivoZoom">
<img src="images/nemo.jpg" alt="">
</a>
<a href="images/walle_large.jpg" class="nivoZoom">
<img src="images/walle.jpg" alt="">
</a>
</div>
</body>
</html>
CSS
/*
* jQuery Nivo Zoom v1.0
* http://nivozoom.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* April 2010
*/
.nivoZoomHover {
position:absolute;
top:0px;
left:0px;
z-index:9;
width:100%;
height:100%;
cursor:pointer;
}
.nivoCaption {
display:none;
position:absolute;
z-index:110;
text-align:center;
background:#010101;
color:#fff;
padding:4px 0;
overflow:hidden;
}
a{
display: inline-block;
margin-left: 50px;
margin-top: 100px;
}
JavaScript
/*
* jQuery Nivo Zoom v1.0
* http://nivozoom.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* April 2010
*/
(function($) {
$.fn.nivoZoom = function(options) {
//Defaults are below
var settings = $.extend({}, $.fn.nivoZoom.defaults, options);
if(settings.overlay){
//Disable overly in IE7 due to z-index bug
if(!($.browser.msie && $.browser.version.substr(0,1)<8)){
$('body').prepend('<div id="nivoOverlay" />');
$('#nivoOverlay').css({
position:'fixed',
top:0,
left:0,
width:'100%',
height:'100%',
background:settings.overlayColor,
opacity:settings.overlayOpacity,
'z-index':90,
display:'none'
});
}
}
return this.each(function(){
var context = $(this);
var nivoZooms = $('a.nivoZoom', context);
nivoZooms.each(function(){
var link = $(this);
if(link.is('a')){
var img = $(this).find('img:first');
//Setup link
link.css({
position:'relative',
display:'inline-block'
});
link.attr('title','Click to zoom');
//Add ZoomHover
link.append('<div class="nivoZoomHover" />');
var nivoZoomHover = $('.nivoZoomHover', link);
nivoZoomHover.css('opacity','0');
link.hover(function(){
if(!link.hasClass('zoomed')){
...