Responsify images
How do I make an responsify images?
What is a responsify images? How do you make a responsify images? This script and codes were developed by Wenting Zhang on 07 November 2022, Monday.
Responsify images - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsify images</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body> <div class="wrapper" style=" width: 300px; height: 200px;"> <img src="http://www.poetscircle.gr/wp-content/uploads/2013/12/photography-artistic-wallpaperbackground-x-id.jpg" alt="" data-focus-x=".65" data-focus-y=".45"/>
</div>
<div class="wrapper" style=" width: 200px; height: 400px;"> <img src="http://www.poetscircle.gr/wp-content/uploads/2013/12/photography-artistic-wallpaperbackground-x-id.jpg" alt="" data-focus-x=".65" data-focus-y=".45"/>
</div>
<div class="wrapper" style=" width: 600px; height: 150px;"> <img src="
http://www.visitscotland.com/cms-images/2x1/see-and-do/242141/hot-air-balloon-aviemore" alt="" data-focus-x=".30" data-focus-y=".35"/>
</div>
<div class="wrapper" style=" width: 200px; height: 400px;"> <img src="
http://www.visitscotland.com/cms-images/2x1/see-and-do/242141/hot-air-balloon-aviemore" alt="" data-focus-x=".30" data-focus-y=".35"/>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Responsify images - Script Codes JS Codes
(function ( $ ) { $.fn.responsify = function() { return this.each(function() { var owdith, oheight, twidth, theight, fx, fy, width, height, top, left; owidth = $('img', this).width(); oheight = $('img', this).height(); twidth = $(this).width(); theight = $(this).height(); fx = $('img', this).attr('data-focus-x'); fy = $('img', this).attr('data-focus-y'); if( owidth/oheight > twidth/theight ) { height = theight; width = theight*owidth/oheight; var fleft = Number(fx) * width; var fright = width - Number(fx) * width; if (fleft < twidth/2) { left = 0; } else if (fleft >= twidth/2 && fright >= twidth/2) { left = twidth/2 - fleft; } else if (fleft >= twidth/2 && fright < twidth/2) { left = twidth - width; } top = 0; } else if( owidth/oheight <= twidth/theight ) { width = twidth; height = twidth*oheight/owidth; var ftop = Number(fy) * height; var fbottom = height - Number(fy) * height; if (ftop < theight/2) { top = 0; } else if (ftop >= theight/2 && fbottom >= theight/2) { top = theight/2 - ftop; } else if (ftop >= theight/2 && fbottom < theight/2) { top = theight - height; } left = 0; } $(this).css({ "overflow": "hidden" }) $('img', this).css({ "position": "relative", "height": height, "width": width, "left": left, "top": top }) }); };
}( jQuery ));
$('.wrapper').responsify();
$(window).resize(function(){ $('.wrapper').responsify();
})
Developer | Wenting Zhang |
Username | wentin |
Uploaded | November 07, 2022 |
Rating | 3 |
Size | 2,140 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Draw Icons with Pure CSS | 1,677 Kb |
ResponsifyJS demo | 5,586 Kb |
SVG Animation | 30,040 Kb |
Shaking mustache | 1,708 Kb |
Algorithmic Animation with Javascript Tail | 2,356 Kb |
Guitar string | 3,001 Kb |
P5.js Tail | 1,745 Kb |
Fibonacci output | 2,014 Kb |
Getting x-height and descender line | 2,822 Kb |
P5.js start point | 1,504 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Formations | Cantelope | 5,731 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Css3 loader | Clknap | 2,391 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Board Site | IndianaLuft | 10,542 Kb |
A Pen by Shidhin | Shidhincr | 5,015 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Three js | Paulq | 2,353 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!