"loop"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="rslides"> <li class="image-w"> <img class="magniflier" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4543/03.jpg" /> </li> <li class="image-w"> <img class="magniflier" src="http://placehold.it/1200x800" /> </li> </ul> <script> $(function() { var native_width = 0; var native_height = 0; var mouse = {x: 0, y: 0}; var magnify; var cur_img; var ui = { magniflier: $('.magniflier') }; // Add the magnifying glass if (ui.magniflier.length) { var div = document.createElement('div'); div.setAttribute('class', 'glass'); ui.glass = $(div); $('body').append(div); } // All the magnifying will happen on "mousemove" var mouseMove = function(e) { var $el = $(this); // Container offset relative to document var magnify_offset = cur_img.offset(); // Mouse position relative to container // pageX/pageY - container's offsetLeft/offetTop mouse.x = e.pageX - magnify_offset.left; mouse.y = e.pageY - magnify_offset.top; // The Magnifying glass should only show up when the mouse is inside // It is important to note that attaching mouseout and then hiding // the glass wont work cuz mouse will never be out due to the glass // being inside the parent and having a higher z-index (positioned above) if ( mouse.x < cur_img.width() && mouse.y < cur_img.height() && mouse.x > 0 && mouse.y > 0 ) { magnify(e); } else { ui.glass.fadeOut(100); //ui.glass.hide(); } return; }; var magnify = function(e) { // The background position of div.glass will be // changed according to the position // of the mouse over the img.magniflier // // So we will get the ratio of the pixel // under the mouse with respect // to the image and use that to position the // large image inside the magnifying glass var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1; var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1; var bg_pos = rx + "px " + ry + "px"; // Calculate pos for magnifying glass // // Easy Logic: Deduct half of width/height // from mouse pos. // var glass_left = mouse.x - ui.glass.width() / 2; // var glass_top = mouse.y - ui.glass.height() / 2; var glass_left = e.pageX - ui.glass.width() / 2; var glass_top = e.pageY - ui.glass.height() / 2; //console.log(glass_left, glass_top, bg_pos) // Now, if you hover on the image, you should // see the magnifying glass in action ui.glass.css({ left: glass_left, top: glass_top, backgroundPosition: bg_pos }); return; }; $('.magniflier').on('mousemove', function() { ui.glass.fadeIn(200); /*ui.glass.show();*/ cur_img = $(this); var large_img_loaded = cur_img.data('large-img-loaded'); var src = cur_img.data('large') || cur_img.attr('src'); // Set large-img-loaded to true // cur_img.data('large-img-loaded', true) if (src) { ui.glass.css({ 'background-image': 'url(' + src + ')', 'background-repeat': 'no-repeat' }); } // When the user hovers on the image, the script will first calculate // the native dimensions if they don't exist. Only after the native dimensions // are available, the script will show the zoomed version. //if(!native_width && !native_height) { if (!cur_img.data('native_width')) { // This will create a new image object with the same image as that in .small // We cannot directly get the dimensions from .small because of the // width specified to 200px in the html. To get the actual dimensions we have // created this image object. var image_object = new Image(); image_object.onload = function() { // This code is wrapped in the .load function which is important. // width and height of the object would return 0 if accessed before // the image gets loaded. native_width = image_object.width; native_height = image_object.height; cur_img.data('native_width', native_width); cur_img.data('native_height', native_height); //console.log(native_width, native_height); mouseMove.apply(this, arguments); ui.glass.on('mousemove', mouseMove); }; image_object.src = src; return; } else { native_width = cur_img.data('native_width'); native_height = cur_img.data('native_height'); } //} //console.log(native_width, native_height); mouseMove.apply(this, arguments); ui.glass.on('mousemove', mouseMove); }); ui.glass.on('mouseout', function() { ui.glass.off('mousemove', mouseMove); }); }); $(".rslides").responsiveSlides({ auto: false, // Boolean: Animate automatically, true or false speed: 500, // Integer: Speed of the transition, in milliseconds timeout: 4000, // Integer: Time between slide transitions, in milliseconds pager: true, // Boolean: Show pager, true or false nav: false, // Boolean: Show navigation, true or false random: false, // Boolean: Randomize the order of the slides, true or false pause: false, // Boolean: Pause on hover, true or false pauseControls: true, // Boolean: Pause when hovering controls, true or false prevText: "Previous", // String: Text for the "previous" button nextText: "Next", // String: Text for the "next" button maxwidth: "", // Integer: Max-width of the slideshow, in pixels navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul' manualControls: "", // Selector: Declare custom pager navigation namespace: "rslides", // String: Change the default namespace used before: function(){}, // Function: Before callback after: function(){} // Function: After callback }); </script>
.image-w { max-width: 400px; } .image-w img { display: block; width: 100%; height: auto; } .magniflier { border: 3px solid red; } .glass { width: 15em; height: 15em; position: absolute; border-radius: 50%; cursor: none; box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); /* hide the glass by default */ display: none; z-index: 2; } .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }

Related: See More


Questions / Comments: