Изображение до и после при помощи JavaScript

Moovix » Блог » Изображение до и после при помощи JavaScript

Форма html

				
					<div class="plg_content_beforeafter">

<div><img fetchpriority="high" decoding="async" src="/path/to/before.png" border="0" alt="before" width="600" height="400" /></div>


<div><img decoding="async" src="/path/to/after.png" border="0" alt="after" width="600" height="400" /></div>

</div>

Java Script

				
					<script type="text/javascript" src="/jquery/beforeafter/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/jquery/beforeafter/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="/jquery/beforeafter/js/jquery.beforeafter-1.4.min.js"></script>

<script type="text/javascript">
$(function(){
	$('#container').beforeAfter({imagePath:'/jquery/beforeafter/js/'});
	$('#container1').beforeAfter({imagePath:'/jquery/beforeafter/js/'});
	$('#container2').beforeAfter({imagePath:'/jquery/beforeafter/js/'});
	$('#container3').beforeAfter({imagePath:'/jquery/beforeafter/js/'});
	$('#container4').beforeAfter({imagePath:'/jquery/beforeafter/js/'});
	$('#container5').beforeAfter({imagePath:'/jquery/beforeafter/js/'});
	$('#container6').beforeAfter({imagePath:'/jquery/beforeafter/js/'});
});
</script>

Скачать файлы скрипта

Демо