كيفاش تزيد jquery zooming للموقع ديالك

كيفاش تزيد jquery zooming للموقع ديالك


فهاد الدرس الجديد غادي نشوفوا كيفاش نزيدو jquery zooming للموقع ديالنا فشنو الدور ديال هاد ال plugin ف jquery zooming كيمكني باش ندير zoom للصور لي عندي فالموقع فهاد الشي كنشوفوه فالمواقع ل ecommerce فاش كنحط la souris علاش شي منتج للمزيد فالموقع ديالهم من هنا.

نظرة سريعة بالفيديو

1- إضافة الملفات الأساسية

أول حاجة زيد projet جديد زيدو فين بغيتي فيه fichier css سميه style.css و fichier js سميه main.js وزيد dossier img لي فيه غادي يكونوا الصور يمكنلك تزيد فيه صور من عندك أو تاخد باش خدمت من السورس كود.
تليشارجي ل fichier zoom.js من الموقع لي ذكرت فالتقديم وزيدو ف dossier ديال ل projet.
منبعد زيد fichier index.html فيه كاين ال header لي فيه روابط css منبعد كاين الجزء لي كنزيد فيه 4 صور فكنعطي ل span ل class zoom لي كتفعل zoom بالإضافة ل id لي غادي نحتاجوه فالكود jquery منبعد كنزيد روابط للملفات js لي غادي نحتاج.
الكود لي زدنا هو : 

                                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Jquery Zoom</title>
</head>
<body>
    <div class="container">
        <span class='zoom' id='img1'>
            <img src='img/1.jpg' width='555' height='320' alt=''/>
            <p>Hover</p>
        </span>
        <span class='zoom' id='img2'>
            <img src='img/4.jpg' width='290' height='320' alt=''/>
            <p>Grab</p>
        </span>
        <span class='zoom' id='img3'>
            <img src='img/5.jpg' width='555' height='320' alt=''/>
            <p>Click</p>
        </span>
        <span class='zoom' id='img4'>
            <img src='img/7.jpg' width='290' height='320' alt=''/>
            <p>toggle</p>
        </span>
    </div>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    <script src="jquery.zoom.min.js"></script>
    <script src="main.js"></script>
</body>
</html>
                            

2- إضافة LES STYLES CSS فالملف style.CSS

فالملف style.css كنزيد les styles css لي غادي نحتاج فالكود لي زدنا هو :

                                html{
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 80%;
    margin: 0 auto;
}
span{
    display: inline-block;
}
span img{
    border-radius: 5px;
    border: solid 2px pink;
}
                            

3- إضافة zooming للصور ديالنا

فباش نزيد zoom للصور ديالي كيكفي باش نسترجعهم بل id لي عطيتهم وكنزيد ل fonction zoom لكل صورة مع طريقة تنفيذ zoom فهناك :

- click يعني بعد الضغط.

- grab يعني بعد السحب.

- toggle يعني فاش كنضغط يلا مكانش zoom كيتزاد ويلا كان العكس كيتحيد.

الكود لي زدنا هو :

                                $(document).ready(function(){
    $('#img1').zoom();
    $('#img2').zoom({ on:'grab' });
    $('#img3').zoom({ on:'click' });			 
    $('#img4').zoom({ on:'toggle' });
});
                            


بحث في الموقع


إشترك للتوصل بالجديد