Image tiling

Developer
Corinne Winthrop
Size
2,261 Kb
Views
16,192
  1. Image tiling Previews
  2. Image tiling HTML Codes
  3. Image tiling CSS Codes
  4. Image tiling JS Codes

How do I make an image tiling?

What is a image tiling? How do you make a image tiling? This script and codes were developed by Corinne Winthrop on 08 October 2022, Saturday.

Image tiling Previews
IQ Test

Image tiling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image tiling</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="sliced"> <img src="https://images.pexels.com/photos/60224/pexels-photo-60224.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" height="400px" width="640px"/>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Image tiling - Script Codes CSS Codes

.sliced{ position: relative; margin: 2em auto;
}
.tile{ float: left;
/* margin: 1px; */
}

Image tiling - Script Codes JS Codes

var imageSlice = function(){ var _defaults = { x : 2, // number of tiles, x axis y : 2, // number of tiles, y axis }; $.fn.sliced = function( options ) { var o = $.extend( {}, _defaults, options ); return this.each(function() { var $container = $(this); // cache this // Code here var width = $container.width(), height = $container.height(), $img = $container.find('img'), n_tiles = o.x * o.y, // total number of tiles tiles = [], $tiles; for ( var i = 0; i < n_tiles; i++ ) { tiles.push('<div class="tile"/>'); } $tiles = $( tiles.join('') ); // Hide original image and insert tiles in DOM $img.hide().after( $tiles ); $tiles.css({ width: width / o.x, height: height / o.y, backgroundImage: 'url('+ $img.attr('src') +')' }); // Adjust position $tiles.each(function() { var pos = $(this).position(); $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' ); }); }); };
};
jQuery(function($){ imageSlice(); $('.sliced').sliced({ x:4, y:4 }); // disabled right click $('.sliced').bind('contextmenu', function(e){ return false; });
});
Image tiling - Script Codes
Image tiling - Script Codes
Home Page Home
Developer Corinne Winthrop
Username cwint
Uploaded October 08, 2022
Rating 3
Size 2,261 Kb
Views 16,192
Do you need developer help for Image tiling?

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!

Corinne Winthrop (cwint) Script Codes
Name
Pinned scrolling sections
Responsive image sizes
Cat vs Mouse
Animated SVG sequence
Crazy Cat Lady Application
Another animated SVG sequence
Responsive Image Tiling
Google map with toggle categories
Zenman Front-End Dev interview homework
Email obfuscation test
Create amazing blog posts with AI!

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!