آموزش JQuery (قسمت ۱۰)

آموزش-jquery-قسمت-۱۰

در آموزش های قبلی JQuery، با دستورات اولیه و کاربردی این کتاب خانه محبوب جاوا اسکریپت آشنا شدید و فکر کنم الان وقت آن رسیده که آموزش های عملی و واقعی رو کم کم شروع بکنیم.در این قسمت آموزش می خوام با جعبه تصاویر آشنا بشید.جعبه تصاویر همان بخشی از سایت می باشد که وقتی روی یک تصویر با ابعاد کوچک کلیک می کنید، همان تصویر در ابعاد بزرگتر برای شما نمایش داده می شود.

این ابزار یکی از پرکاربردی ترین ابزار برای نمایش لیست تصاویر مانند تصاویر یک محصول یا ساخت اسلایدر می باشد که در این آموزش روش ساخت یک جعبه تصاویر ساده رو بهتون آموزش میدم.

کدهای HTML : 

<div class="image-box">
    <div class="main-image">
        <img src="">
    </div>

    <div class="slider-image">
        <div class="image">
            <img src="http://dr-code.ir/uploads/images/201803261522047284jquery-learingn.png" alt="">
            <img src="http://dr-code.ir/uploads/images/201804011522573982html.png" alt="">
            <img src="http://dr-code.ir/uploads/images/201804051522913964css.png" alt="">
            <img src="http://dr-code.ir/uploads/images/201804141523691611javacript.png" alt="">
        </div>
    </div>
</div>

ما توسط کدهای HTML بالا توانستیم یک تصویر اصلی جهت نمایش اندازه بزرگ تصاویر و 4 تصویر کوچک ایجاد کنیم.در ادامه توسط کدهای CSS به تصاویر اندازه و نحوه قرار گیری در صفحه را تعریف می کنیم.

 

کدهای CSS :

<style>
    .image-box .slider-image img{
        width: 15%;
        height: auto;
        display: inline-block;
        opacity: 0.6;
        z-index: 1;
        margin:3px;
    }
    .image-box .slider-image img:hover{
        opacity: 1;
        z-index: 999;
        cursor: pointer;
    }
    .image-box .slider-image img.active{
        box-sizing: border-box;
        box-shadow:2px 2px 3px #727272;
        opacity: 1;
    }
    .main-image img{
        width: 64%;
        height: auto;
    }
</style>

خب توسط کدهای CSS هم اندازه تصاویر و نیز نحوه قرار گیری در صفحه را تعریف کردیم به طوری که تصویر اصلی در بالا قرار گیرد و سایر تصاویر با اندازه کوچکتر در زیر تصویر اصلی باشند که توسط کدهای JQuery به آنها رویداد کلیک تعریف می کنیم.

 

کدهای JQuery : 

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('.main-image img').first().attr('src', $('.image img').attr('src'));
        $('.image img').first().addClass('active');
        $('.image img').on('click', function(){
            $('.image img').removeClass('active')
            $(this).addClass('active')
            var src = $(this).attr('src')
            $('.main-image img').attr('src', src)
        })
    })
</script>

توسط کدهای JQuery برای تصاویر کوچک تر رویداد Click‌ تعریف کردیم و زمانی که بر روی یک تصویر کلیک انجام شد، اندازه بزرگ تر همان تصویر در بالای تصاویر کوچک تر نمایش داده میشود.

در این آموزش سعی شده یک پروژه واقعی و کاربردی براتون انجام بشه و به کمک HTML - CSS - JQuery توانستیم یک جعبه تصاویر کاملا ساده ایجاد کنیم که با توجه به نیاز خودتان می توانید آن را توسعه داده و استفاده کنید و در آموزش های بعدی نیز به توسعه و افزودن امکانات جدید برای این جعبه تصاویر خواهم پرداخت.

¿ سوالات و مشکلات خودتون رو می توانید از بخش پرسش و پاسخ مطرح کنید.


► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



نظرات کاربران

نظر شما؟