انشاء البوم صور داخل الموضوع بتاثيرات رائعة [لغة css]

مقدمة عن الاضافة

السلام عليكم ورحمة الله ..
موضوعنا اليوم عن اضافة رائعة جدا تعطى الى مواضيعك لمسة من الجمال حيث تعرض مجموعة من الصور بشكل منسق ورائع ، لان فى بعض الاوقات نريد ان نرفق مجموعة من الصور بداخل المشاركة لمدونات بلوجر ولكن المشكلة التى تواجهك ان الصور تظهر بشكل غير مقبول (الشكل الافتراضى) شاهد المثال التالى لتجرب بنفسك :)

مثال توضيحى

ناتى الان الى تركيب الاكواد

أولا : نقوم بتسجيل الدخول الى بلوجر
ثم نتجه الى القالب >>> تحرير HTML
نبحث عن </head> ونضع قبله مباشرة الكود التالى :

<style type='text/css'>
.image-container {
position: relative;
width: 640px;
height: 530px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.image-container a {
display: inline;
text-decoration: none;
}
/* Mini-thumbnails style */
.mini-thumbnail {
width: 18%;
height: 88px;
margin: 4px;
opacity: 1;
top: 10px;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the main thumbnail */
.large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
.feature {
top: 110px;
width: 100%;
opacity: .3;
}
/* style for the selected mini-thumbnail */
a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected image */
a:hover .large-thumbnail {
top: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
</style>

ثانيا : عند كتابتك لمشاركة قم بتحويل الكتابة من وضع تاليف الى HTML كما بالصورة :

ثم قم بادراج الكود التالى بداخل الموضوع فى اى مكان تريده :

<div class="image-container">
<a>
<img class="mini-thumbnail" src="URL1" />
<img class="large-thumbnail" src="URL1" />
</a>
<a>
<img class="mini-thumbnail" src="URL2" />
<img class="large-thumbnail" src="URL2" />
</a>
<a>
<img class="mini-thumbnail" src="URL3" />
<img class="large-thumbnail" src="URL3" />
</a>
<a>
<img class="mini-thumbnail" src="URL4" />
<img class="large-thumbnail" src="URL4" />
</a>
<a>
<img class="mini-thumbnail" src="URL5" />
<img class="large-thumbnail" src="URL5" />
</a>
<a>
<img class="large-thumbnail feature" src="LARGE-URL" />
</a>
</div>

تخصيص الكود

1- استبدل URL1 برابط الصورة الاولى ، و URL2 برابط الصورة الثانية .... وهكذا حتى تنتهى من الـ5 صور
2- استبدل LARGE-URL برابط الصورة الثابتة التى تكون فى الخلفية

* اذا كنت تريد تخصيص رابط لكل صورة فاستخدم هذا الكود بدلا من السابق مع مراعاة استبدال your url بالرابط المراد الانتقال اليه عند الضغط على اى الصورة وايضا روابط الصور السابق ذكرها :

<div class="image-container">
<a href="your url">
<img class="mini-thumbnail" src="URL1" />
<img class="large-thumbnail" src="URL1" />
</a>
<a href="your url">
<img class="mini-thumbnail" src="URL2" />
<img class="large-thumbnail" src="URL2" />
</a>
<a href="your url">
<img class="mini-thumbnail" src="URL3" />
<img class="large-thumbnail" src="URL3" />
</a>
<a href="your url">
<img class="mini-thumbnail" src="URL4" />
<img class="large-thumbnail" src="URL4" />
</a>
<a href="your url">
<img class="mini-thumbnail" src="URL5" />
<img class="large-thumbnail" src="URL5" />
</a>
<a href="your url">
<img class="large-thumbnail feature" src="LARGE-URL" />
</a>
</div>

 الى هنا نكون قد انتهينا واطلب منك طلب صغير ، ان اعجبك الموضوع فلا تذهب دون ان تضع تعليق يشجعنا

لن اسامح من ينقل الموضوع بدون ذكر المصدر