دليل المدون

2012-07-04

كود رائع لتكبير مصغرات الصور بمرور الماوس Image Enlarger

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

طريقة التركيب على مدونات بلوجر:
إنسخ الكود التالى إلى موقعك
 
  <style type="text/css">

/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */

.ienlarger {
 float: left;
 clear: none; /* set to left or right if needed */
 padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
 padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a { 
 display:block;
 text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
  position:relative;
}

.ienlarger span img {
 border: 1px solid #FFFFFF; /* adds a border around the image */
 margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span {  /* this is for the large image and the caption */
 position: absolute;
 display:none;
 color: #FFCC00; /* caption text colour */
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px; /* caption text size */
 background-color: #000000;
 font-weight: bold;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 13px;
 padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span { 
 display:block;
 top: 50px; /* means the pop-up's top is 50px away from thumb's top */
 left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
 z-index: 100;
 
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add  
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */ 

/* If you want the pop-up open above the thumb, remove the top: 50px; and add  
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */ 

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
 width: 150px; /* enter desired thumb width here */
 height : auto;
}

/* smart image enlarger ends here */

</style>

  <div class="ienlarger"><a href="http://www.condaianllkhir.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="http://www.condaianllkhir.com/"><img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="http://www.condaianllkhir.com/"><img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

  <div class="ienlarger"><a href="#nogo"><img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" class="resize_thumb" /><span>
    <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="large" /><br />
    Some text can go here.</span></a></div>

 <br style="clear:left" />


هذا الكود يتم تطبيقه داخل الموضوع بمعنى أثناء تحرير الموضوع إنتقل إلى جهة تحرير HTML
ثم أضع روابط الصور بداخل هذا الكود

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

هناك 6 تعليقات

  1. السلام عليكم
    جزاكم الله خيرا ع هذا المجهود الرائع
    ---------
    انا عندي مشكلة في مدونتي لا أعرف كيف أحلها

    هي
    .. خلفيه المشاركة انا اخترتها باللون الابيض لكنها جاءت لون اخر

    وحاولت كتير لكني ماعرفت

    ردحذف
  2. ممكن اسال عن شئ
    ---
    لماذا عندما اضع اداة للمدونة تاتى بلون خلفية المدونة ولا تاتي بلون للخلفية مستقل

    ردحذف
  3. ارجو الرد سريعا

    ردحذف
  4. واضح إنه يوجد مشكلة بقالب مدونتك أنصحك بتركيب قالب آخر مناسب تجنبا لكل المشاكل الموجودة بقالب مدونتك
    وشكرا لمتابعتك

    ردحذف
  5. 1- واين نضع رابط الصورة ؟؟ استبدلت روابط الصور اعلاه بصور اخرى ولم تظهر
    2 - اذا كان عندي اكثر من صورة كيف طريقتها

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

    ردحذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون