ijquery

افکت نمونه کار ها به صورت ریسپانسیو

دیدگاه‌ خود را بنویسید / افکت، افکت تصوير / از

screenshot

با استفاده از این پلاگین جی کوئری می توانید برای بخش نمونه کارهای خود افکت تصاویر جالبی ایجاد کنید به صورت کاملاْ ریسپانسیو

آموزش استفاده

  1. قبل از تگ <head/> 
        <link rel="stylesheet" type="text/css" href="fdw-demo.css" media="all" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery-v1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-hover-effect.js"></script>
<script type="text/javascript">
//Image Hover
jQuery(document).ready(function(){
jQuery(function() {
	jQuery('ul.da-thumbs > li').hoverdir();
});
});
</script>

     

  2. بعد از تگ <body> 
    <div id="container">
				<div class="freshdesignweb-top"><h1><a href="#">Fresh Design Web - Demo</a></h1></div><div class="clr"></div>
			<header>
				<h1><strong> Responsive Portfolio Gallery with jQuery Tutorial</strong></h1>
            </header>
<div class="freshdesignweb">     
<!-- Portfolio 4 Column start -->
    <div class="image_grid portfolio_4col">
    <ul style="height: 495px;" id="list" class="portfolio_list da-thumbs"><li>
            <img src="images/portfolio1.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
                <h3>New Year 2013</h3>
                <em>Happy</em>
                <span class="link_post"><a href="/"></a></span>
                <span class="zoom"><a href="images/portfolio1.jpg"></a></span>
            </article>
        </li><li>
            <img src="images/portfolio2.jpg" alt="img">
            <article class="da-animate da-slideFromTop" style="display: block;">
                <h3>lifestyle</h3>
                <em>auctor</em>
                <span class="link_post"><a href="/"></a></span>
                <span class="zoom"><a href="images/portfolio2.jpg"></a></span>
            </article>
        </li><li>
            <img src="images/portfolio3.jpg" alt="img">
            <article class="da-animate da-slideFromLeft" style="display: block;">
                <h3>Models</h3>
                <em>ipsum</em>
                <span class="link_post"><a href="/"></a></span>
                <span class="zoom"><a href="images/portfolio3.jpg"></a></span>
            </article>
        </li><li>
            <img src="images/portfolio4.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
                <h3>Fashion</h3>
                <em>China</em>
                <span class="link_post"><a href="/"></a></span>
                <span class="zoom"><a href="images/portfolio4.jpg"></a></span>
            </article>
        </li><li>
            <img src="images/portfolio5.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
                <h3>Asean life</h3>
                <em>lobortis</em>
                <span class="link_post"><a href="/"></a></span>
                <span class="zoom"><a href="images/portfolio5.jpg"></a></span>
            </article>
        </li><li>
            <img src="images/portfolio6.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
                <h3>Asean life</h3>
                <em>elementum</em>
                <span class="link_post"><a href="/"></a></span>
                <span class="zoom"><a href="images/portfolio6.jpg"></a></span>
            </article>
        </li><li>
            <img src="images/portfolio7.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
                <h3>Asean life</h3>
                <em>risus</em>
                <span class="link_post"><a href="/"></a></span>
                <span class="zoom"><a href="images/portfolio7.jpg"></a></span>
            </article>
        </li><li>
            <img src="images/portfolio8.jpg" alt="img">
            <article class="da-animate da-slideFromLeft" style="display: block;">
                <h3>Asean life</h3>
                <em>arcu</em>
                <span class="link_post"><a href="/"></a></span>
                <span class="zoom"><a href="images/portfolio8.jpg"></a></span>
            </article>
        </li>
    </ul>
    </div>
    <!-- Portfolio 4 Column End -->
</div></div>
<div class="clr"></div>
            <!-- freshdesignweb top bar -->
            <div class="freshdesignweb-buttom">
                <a href="#" target="_blank">Home</a>
                <span class="right">
More jquery :
<a title="ijquery - Free Jquery plugins,Javascript,CSS,html" href="http://www.ijquery.ir/">www.ijquery.ir</a>
                </span>
                <div class="clr"></div>
            </div><!--/ freshdesignweb top bar -->

<script type="text/javascript">
var get_height = window.innerHeight; 
var get_height1 =  get_height - 25;
var get_container = document.getElementById('container');
get_container.style.height =  get_height1 + 'px';
</script>

     


پیش نمایش دانلود فایل پلاگین

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *