تكبير الصورة على انقر فوق html. البرنامج النصي لتكبير الصور في ووردبريس. تركيب نص لتكبير الصور

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

قد تكون أيضا مهتما ب:

كيف تجعل النص ظل في 5 دقائق

مرحبا عزيزي القارئ لمدونتي. في هذه المقالة ، ستتعلم كيفية إنشاء ظل نص في 5 دقائق باستخدام أنماط css وكود html.

كيفية عمل أزرار لأسفل لموقع ويب

تمت كتابة هذه المقالة استمرارًا للمقال الخاص بكيفية عمل زر للموقع.

كيفية إزالة منشور من الصفحة الرئيسية باستخدام التعليمات البرمجية

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

نقوم بإزالة العنوان من الصفحة الرئيسية وإدخالات RSS

نواصل تحسين وظائف الموقع ومظهره. نقوم بإزالة الإدخالات غير الضرورية من الصفحة الرئيسية و RSS.

فتات الخبز على موقع ووردبريس

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

سأحاول اليوم أن أكشف لكم سر الزيادة هذا. بشكل عام ، يمكن تكبير الصورة بعدة إجراءات:

• على سبيل المثال ، يمكنك زيادته عند تحريك مؤشر الماوس
• يمكن تكبير الخيار الثاني عند النقر

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

نقوم بتوصيل نصوص Java لزيادة الصورة

ستكون النتيجة النهائية صورة مكبرة حسب النوع. حسنًا ، كل هذا فلسفة ، لتكبير الصورة ، نحتاج إلى تضمين مكتبة jQuery. لا أتذكر ، ولكن يبدو أنني كتبت في بعض الدروس عن هذه المكتبة ، ولكن إذا نسيت ، فسوف أذكرك. لتوصيل المكتبة ، تحتاج إلى أدخل موقع اثنين من الرموز.

يجب أن يكون مفهوماً أن هناك الكثير من مكتبات jQuery وفي حالات مختلفة ترتبط مكتبات مختلفة

إذا كتبت موقعك على لغة html عارية ، فستحتاج إلى هذا الرمز لإدراج صورة

يرجى ملاحظة أنه في هذه الحالة سوف تحتاج إلى وضع صورتك في مجلد الصور وتحديد اسمك للصورة. لا تنس أن ملفات مكتبة البرامج النصية Java يجب أن تكون موجودة في نفس المكان مثل الصفحة الرئيسية للموقع ، وإلا فاكتب مسارًا مختلفًا لها. يمكنك تحميل مكتبة الملفات لتكبير الصورة على الموقع. حسنًا ، والأهم الآن ، إذا كنت تريد تكبير صورتك ، فقم بإضافة الخصائص التالية إليها.

تحياتي لجميع قراء موقع المدونة. في مدونتي ، العمود الذي يحتوي على المقالات المنشورة ليس ضيقًا. يمكن وضع لقطات الشاشة والصور بشكل كبير بحيث يكون كل شيء مرئيًا بوضوح. ومع ذلك ، في اليوم الآخر ، عندما بدأت في كتابة مراجعة لبرنامج Majento PositionMeter الذي تم إنشاؤه للتحقق من موقع موقع ما في محركات البحث ، كنت أرغب في عرض لقطة شاشة بملء الشاشة.

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

اتضح كما في فيلم "Crocodile Dundee" - استمرت المسيرة. فشل في جدول العمل ، انتهك جميع الحدود التي خصصها لنفسه للبحث. حسنًا ، بارك الله فيه ، أتمنى ألا تذهب سدى. ربما يكون عملي مفيد لشخص ما. أوجه انتباهكم إلى حلين جيدين لزيادة الصورة عند النقر عليها.

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

تكبير الصورة بالنقر باستخدام Highslide JS

باستخدام البرنامج النصي Highslide JS الذي طورته الشركة النرويجية Highsoft AS ، بالإضافة إلى التكبير عند النقر ، يمكنك إنشاء معارض وسائط ونوافذ منبثقة تعمل على html و ajax و Iframe و flash. دعونا نتخذ إجراء. نذهب إلى صفحة تنزيل البرنامج النصي http://highslide.com ، وننزل الأرشيف الجديد ونفك ضغطه.

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

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

يقول التعليق تحت رقم واحد أنك بحاجة إلى تحديد المسارات إلى ملفات js و css ، ويجب بالتأكيد أن تكون موجودة على الخادم الخاص بنا. نحذف التعليقات ، ونكتب المسار الذي سيوجد فيه الدليل الذي يحتوي على ملفات البرنامج النصي. نستبدل جميع النقطتين باسم الكتالوج الذي تم تنزيله - highslide-4.1.13. وسنستبدل ملف highslide.js بملف highslide-full.js أكثر وظيفية. فجأة في المستقبل ، سترغب في استخدام بعض الأشياء الجيدة من Highslide JS. التعليق الثاني يقول أنه من المهم تحديد المسار إلى دليل رسومات البرنامج النصي. ويمكنك تغيير الإعدادات هنا. يجب أن يتحول إلى شيء من هذا القبيل.

الآن يجب وضع الكود النهائي في قسم الرأس قبل علامة الإغلاق. في مدونة WordPress الخاصة بي ، قمت بوضعه في ملف footer.php للموضوع الذي أستخدمه ، قبل علامة الإغلاق

.

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

إضافة نص إلى الصورة المنبثقة

الآن دعنا نزيل كل شيء غير ضروري من دليل highslide-4.1.13.

نجد المجلد highslide ، نفتحه ونحذف كل شيء باستثناء مجلد الرسومات والملفات المضمنة highslide-full.js و highslide.css و highslide-ie6.css. نضع highslide-4.1.13 في الدليل الجذر لموقعنا على الويب. النص جاهز للعمل. يمكنك تحميل الصور ووضع كود البرنامج النصي على الصفحة والاستمتاع بتأثير تكبير الصورة عند النقر فوقه.

لكي يعمل البرنامج النصي Highslide JS بشكل صحيح في WordPress ، يجب أولاً حل مشكلة واحدة. عند التبديل من محرر html إلى المحرر المرئي ، يختفي جزء من كود البرنامج النصي - onclick = "return hs.expand (this)".
افتح ملف وظائف theme.php وأضف الكود التالي في الأسفل ، قبل؟>.

// دالة التصفية change_mce_options ($ initArray) ($ initArray ["verification_html"] = false؛ $ initArray ["cleanup_on_startup"] = false؛ $ initArray ["cleanup"] = false؛ $ initArray ["forced_root_block"] = false؛ $ initArray ["validate_children"] = false؛ $ initArray ["remove_redundant_brs"] = false؛ $ initArray ["remove_linebreaks"] = false؛ $ initArray ["force_p_newlines"] = false؛ $ initArray ["force_br_newlines"] = false؛ $ initArray ["fix_table_elements"] = false؛ $ initArray ["الكيانات"] = "160، nbsp، 38، amp، 60، lt، 62، gt"؛ إرجاع $ initArray؛) add_filter ("tiny_mce_before_init"، "change_mce_options" ) ؛

حفظ التغييرات ، حل المشكلة.

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

أزرار إضافية في محرر HTML لـ Highslide JS

افتح ملف وظائف theme.php مرة أخرى والصق الكود التالي في الأسفل ، قبل؟>.

// أزرار إضافية محرر html add_action ("admin_print_footer_scripts"، "add_sheens_quicktags") ؛ الوظيفة add_sheens_quicktags () (؟>

يرجى ملاحظة أنه في الزر mo1 قمت بتعيين أقصى عرض مسموح به لعرض الصورة المصغرة لعرض مدونتي = ”730 ″. إذا كنت بحاجة إلى صورة مصغرة أصغر ، فأنا فقط أقوم بتغيير القيمة. استبدل العرض المسموح به بقيمتك الخاصة. يمكنك أيضًا ضبط الارتفاع.

نحفظ ، نذهب إلى محرر النصوص ، نرى ما يلي.

باستخدام الأزرار div و mo1 و mo2 و float-l و float-r ، يمكن الآن عرض رمز البرنامج النصي Highslide JS المطلوب بسرعة وسهولة. يبقى كتابة المسار إلى الصور ، وملء العنوان ، والبديل ، وكتابة نص إضافي للصور.

يمكنك إنشاء تكوين البرنامج النصي الخاص بك باستخدام محرر Highslide JS. هذا بالضبط ما فعلته لمدونتي.

استخدام محرر Highslide JS

في العمود الأيسر من النافذة المفتوحة لموقع المطورين ، انتقل إلى محرر Highslide JS بالنقر فوق الزر Editor. ستفتح نافذة أمامنا - مرحبًا بك في محرر Highslide.

انقر على الزر الأخضر ابدأ!

خطوة بخطوة حول كيفية استخدام محرر Highslide JS. توصيات موجزة.

سيتم فتح علامة التبويب "عام" بشكل افتراضي.

عام

لغة

هناك 35 لغة في المجموع. ثلاثة منهم من منطقة ما بعد الاتحاد السوفيتي. الليتوانية والروسية والأوكرانية. من السهل ترجمتها إلى لغة الاهتمام. للترجمة قليلاً ، ستفهم أدناه في أي ملف يوجد كل ذلك. حدد اللغة المطلوبة والمضي قدما.

مثال تحميل

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

• مخطط دائري أبيض
• حد أبيض وظل الظل
• لا حدود ، زر إغلاق بسيط
• لا يوجد مخطط تفصيلي ، حدود CSS ملونة

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

معرض و HTML

لقد تخطيت هاتين النقطتين لأنهما غير مدرجين في مهامي. أنا مهتم فقط بتكبير الصورة عندما أنقر عليها.

نمط

ظفري
التسمية التوضيحية

تخصيص مظهر وتأثيرات الصورة المصغرة.

ثلاثة إعدادات للاختيار من بينها. يمكنك عرض تلميحات تحت الصورة المصغرة.

لا شيء - لا يوجد موجه ، نص أدناه - مع نص توضيحي وأيقونة ونص أدناه - مع صورة ونص. أعتقد أن التلميحات زائدة عن الحاجة.

زر حد الصورة المصغرة

من خلال النقر على هذا الزر ، يمكنك ضبط سمك ولون حدود الصورة المصغرة.

نمط التسمية

ضع علامة اختيار في المعاينة ، وحدد عرض أيقونة التنزيل. هذا في حالة النقر فوق الصورة ، ولا يتعجل ظهور زيادتها.
الأنماط المنبثقة
معرفتي

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

إذا كنت تريد تعتيم خلفية الصفحة عند النقر فوق الصورة لتكبيرها ، فحدد مربع الاختيار في هذا الإعداد. بالنقر فوق خيارات التعتيم ، اضبط خيارات التعتيم ، وحدد لونًا.

سلوك

في السلوك ، قمنا بإعداد سلوك النافذة المنبثقة.
حيوية
التخفيف
أربعة خيارات للرسوم المتحركة عند عرض صورة مكبرة.

زر الرسوم المتحركة المتقدم

ضبط سرعة ظهور واختفاء الصورة المكبرة.

إخفاء الصورة المصغرة عند التوسيع (وليس المعرض)

إذا تم تحديد هذا العنصر ، فعند تكبير الصورة ، ستكون الصورة المصغرة نفسها غير مرئية.
حجم ومحاذاة النوافذ المنبثقة
تعديل أحجام النافذة المتزايدة ومواءمتها.

انتقام

حدد خيار المحاذاة الافتراضي للصورة المكبرة. اخترت عرض صورة مكبرة على الصفحة - avto.

زر محاذاة متقدمة

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

تراكبات

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

العنوان مأخوذ من عنوان صورة كبيرة ، التسمية التوضيحية من النص الملفوف في div.

لقد قمت بإلغاء تحديد البندين التاليين. زر الإغلاق - يعرض تقاطعًا قريبًا في الزاوية اليمنى العليا. إظهار الاعتمادات - يعرض ارتباطًا سريًا إلى موقع المطورين.

حققنا ما أردناه ، مظهر النافذة المنبثقة بالصورة يناسبنا ، المضي قدمًا.

تحرير ملفات الموقع ، تكامل البرنامج النصي

نقوم بتوصيل تكوين البرنامج النصي الخاص بنا باتباع الخطوات الثلاث الموصى بها.

أولاً ، افتح علامة التبويب "نشر" في نافذة المثال ، انقر فوق "نعم" ، قم بتنزيل الأرشيف بتكوينك الخاص على جهاز الكمبيوتر الخاص بك عن طريق النقر فوق تنزيل أرشيف مضغوط. بعد ذلك ، قم بفكها واتركها وشأنها الآن. انسخ محتويات الخطوة 2 والخطوة 3 إلى الملف النصي الذي تم إنشاؤه لتحريره لاحقًا ، وأغلق النافذة.

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

يا! يحدث هذا على النحو التالي: تذهب إلى مدونة ، وترى شاشة ، ولكن ما بداخلها غير مرئي على الإطلاق. هل تعتقد ما الذي أراد مؤلف هذا المنشور إظهاره فيه؟ ولكن هناك طريقة للخروج - نص برمجي لزيادة الصورة عند النقر فوقها!

شيء رائع جدا ، هذا السيناريو. انظر بنفسك ، انقر للتكبير:

(قابل للنقر)

في الواقع ، هناك العديد من التأثيرات المختلفة لتكبير الصورة في مقال مدونة ، لكن هذا التأثير هو الأفضل في رأيي.

من الذي سيستفيد من نص تكبير الصورة هذا؟

1. بادئ ذي بدء ، هؤلاء الذي يأخذ لقطات الشاشة مع التفسيرات . على سبيل المثال ، إذا قررت التقاط لقطة شاشة ضخمة لمقالك ، فقد رسمت شيئًا هناك ، من أجل جعل المادة أكثر قابلية للفهم ، قاموا بإلقائها في المقالة ، لكنها ببساطة لا تتناسب تمامًا مع صفحة المدونة الخاصة بك ، لذلك يقوم WordPress بالضغط تلقائيًا ، حتى لا يتجاوز حدود الصفحة. وبعد الضغط ، يتم تقليل الرؤية وإمكانية القراءة بشكل كبير. لم أحصل على ذلك مطلقًا ، لذلك قررت استخدام هذا البرنامج النصي لزيادة الصورة دون فقد الجودة.
2. إذا كنت ببساطة لا تريد أن تنشر صور ضخمة في المقال . يحدث أنك تحتاج إلى عرض الكثير من الصور في مقال واحد ، لكنك لا تريد أن تشغل هذه الصور مساحة كبيرة ، فإن تثبيت البرنامج النصي هو الخيار الأفضل! وبشكل عام ، إذا كنت لا ترغب في وضع صور ثلاثية الأبعاد ، فإن هذا البرنامج النصي ضروري ببساطة.

بخير. الآن نحن بحاجة إلى تثبيت البرنامج النصي على موقعنا. يتم التثبيت في 3 خطوات:

1. قم بتنزيل البرنامج النصي وتحميله إلى الدليل الجذر لموقعك.
2. نقوم بتثبيت الكود الضروري على موقعك.
3. نرمي الصورة في المقالة ونقوم بتهيئة عرضها.

لذا ، لنبدأ.

الخطوة الثانية هي تثبيت كود البرنامج النصي. أين يتم تثبيت الكود؟ يمكن ضبطه على header.php ، و footer.php ، و function.php ، و index.php ، لكني عادةً ما أضبط على footer.php قبل العلامة

, حتى يتم تحميل الكود أخيرًا.

هذا هو الكود نفسه:

وهذا ما حدث لي:

(قابل للنقر)

والآن الأكثر إثارة للاهتمام.

لكي يقوم البرنامج النصي بتكبير الصور دون فقدان الجودة ، تحتاج إلى:

1. بعد تحميل الصورة على المقال ، تحتاج إلى فتح "خيارات الصورة" وفي الفقرة " وصلة" تحديد " ملف وسائط" .