نمایش دمو و افکتهای پلاگین جکوئری رایگان ( dc simple image hover jquery plugin ( version .5
Opacity With Background Effect
Zoom In Effect
Zoom Out Effect
شروع سریع با این پلاگین :
1- فایلها و پیشنیازهای پلاگین را به صفحه خود اضافه نمایید
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="/js/j_dc_image_hover.js" type="text/javascript"></script> <link href="/css/j_dc_image_hover.css" rel="stylesheet" type="text/css" /> <link href='https://fonts.googleapis.com/css?family=Averia+Sans+Libre' rel='stylesheet' type='text/css'>
شما میتوانید نمونه و فایلهای مورد نیاز را از لینک زیر دانلود نمایید :
2.-HTML Element های مورد نیاز را بسازید
کدهای html خود را با شباهت به کلاسهای css زیر وارد نمایید
<div class="j_dc_image_hover" id="jdc_image_h_effect1"> <h2 class="j_dc_image_hover_h2" >Opacity With Background Effect</h2> <div class="dc_img_column"> <div class="j_dc_image_hover_image_div"><img src="/images/baby1.jpg" alt="baby1" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect </a></div> <div class="j_dc_image_hover_image_div"><img src="/images/baby2.jpg" alt="baby2" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect </a></div> <div class="j_dc_image_hover_image_div"><img src="/images/baby3.jpg" alt="baby3" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect</a></div> </div> <div class="dc_img_column"> <div class="j_dc_image_hover_image_div"><img src="/images/baby4.jpg" alt="baby1" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect </a></div> <div class="j_dc_image_hover_image_div"><img src="/images/baby5.jpg" alt="baby2" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect </a></div> <div class="j_dc_image_hover_image_div"><img src="/images/baby6.jpg" alt="baby3" ><a href="#" class="j_dc_image_hover_link" > Opacity Effect</a></div> </div> </div>
3.- پلاگین افکت گذار روی تصاویر را با توجه به نام id تگ div اصلی خود با افکت مورد نیاز فراخوانی نمایید
<script type="text/javascript"> $(document).ready(function(){ $("#jdc_image_h_effect1").j_dc_image_hover_func("opacity"); }); </script>
on version 0.5 you can use this affects :
opacity
zoom_in
zoom_out