M o o v i x

Размещено: 18 октября 2022 в Блог

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

Форма html

<div class="plg_content_beforeafter">

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


<div><img 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>
 

 

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

Демо