الصفحة الرئيسية » UI / UX » كيفية توسيع الصور المصغرة مثل صور جوجل

    كيفية توسيع الصور المصغرة مثل صور جوجل

    صور جوجل تدير فريدة من نوعها مع معاينات الصورة المصغرة من العديد من المواقع المختلفة. يؤدي النقر فوق أي من هذه الصور المصغرة إلى توسيع الشاشة بمزيد من التفاصيل وصورة أكبر.

    إنها واحدة من أفضل ميزات معرض الصور التي استخدمتها الآن, يمكنك استنساخ ذلك مع Gridder.js.

    يتبع هذا المكون الإضافي المجاني jQuery خطى UX المدهشة من Google عن طريق إنشاء مكون إضافي يطابق هذا التأثير. يمكنك تحويل أي معرض صور إلى معرض على غرار صور Google مع كل نفس الرسوم المتحركة وميزات العرض.

    أنا مندهش من سرعة وسهولة الاستخدام التي تأتي مع هذا البرنامج المساعد. فقط النقر فوق أي صورة مصغرة يعرض على الفور لقطة أكبر والرسوم المتحركة نظيفة للغاية.

    الصور تضمين قسم للنص الوصفي في حال كنت ترغب في إضافة بعض التفاصيل أو الروابط المتعلقة بالصور. هذا يعمل بشكل جيد بشكل خاص لمواقع محفظة بسيطة بهدف التركيز على الصور.

    علاوة على ذلك ، يمكنك ذلك أيضا سحب المحتوى عبر اياكس. هذا يتيح لك إنشاء صور مصغرة ديناميكية التي تسحب المحتوى من مواقع الويب الأخرى أو من خلال واجهات برمجة التطبيقات.

    كل حدث نقرة يقدم طريقة رد الاتصال, حتى يمكنك تشغيل مكونات إضافية أو وظائف JavaScript بجانب Gridder. مع وجود العديد من الخيارات ، يبدو من الناحية العملية كإطار شبكي كامل!

    منذ الشبكة يعمل على مسج, أنها تتطلب أحدث إصدار كتبعية. ولكن ، هذا هو كل ما تحتاجه (إلى جانب ملف Gridder.js) ، ومع بضعة أسطر من HTML ، يمكنك تشغيل شبكتك بسلاسة.

    يجب عليك التحقق من صفحة جيثب ل تعليمات الإعداد الكامل لكن هنا معاينة سريعة ما يشبه HTML:

      
    المحتوى يذهب هنا ...

    كل المحتوى يتم سحبها من خلال جافا سكريبت, حتى تتمكن من تحميل أي شيء تريده.

    انها البرنامج المساعد تنوعا بشكل لا يصدق مع خيارات ل تغيير سرعة الحركة ، والتخفيف ، وإغلاق نمط الزر ، وموقف إزاحة التمرير لأنه عندما ينقر المستخدم على صورة مصغرة جديدة.

    سوف يجد Newbie والمطورين المحترفين على حد سواء قيمة كبيرة في هذا البرنامج المساعد. ومع ذلك ، إذا كنت لا تزال غير متأكد مما إذا كان هذا مناسبًا لك ، فقم بإلقاء نظرة على صفحة العرض التقديمي المباشر في Gridder واللعب حولها.