JSFiddle - React, Tailwind, and code Playground
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')){
...