ألبوم صور بتقنية مختلفة : Spacegallery

 

بسم الله الرحمن الرحيم

 

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

 

 

 

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

 

 

 

 

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

 

 

الأن قم بالبحث عن الوسم </head> و ألصق قبله الكود التالي:

 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='رابط ملف eye.js' type='text/javascript'/>
<script src='رابط ملف utils.js' type='text/javascript'/>
<script src='رابط ملف spacegallery.js' type='text/javascript'/>

اقرا ايضا :Tabbed Sidebar إضافة جميلة و سهلة

<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();

اقرا ايضا :حماية حقوق تصميم قالب مدونات بلوجر منعا للسرقة

$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

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

 

 

بعد ذالك قم بالبحث عن الوسم ]]></b:skin> و أضف قبله الكود التالي :

 

#myGallery {
width: 100%;
height: 400px; /* إرتفاع الصورة */

اقرا ايضا :إضافة تحميل المقالات تلقائيا عند النزول بالسكرول بار في مدونات بلوجر

}
#myGallery img {
border: 2px solid #52697E; /* حواف و لون الصورة */
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDeS7F9vLRsweRWOTAJewOkGiP2EpNVDLZ_s3H4G1tSpAchPqz8tQiQ5w6hL4Wh3k3rqYyd0byI0cOU-uFjiYORPDSL6eAKRuXYVl_Yy5icbpiXrS4WUOCpJOpAxrM8Xven_tIysepW8/) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;

اقرا ايضا : تغيير العبارات (رسالة أحدث، رسالة أقدم) بروابط وعناويين المواضيع

height: 100%;
}

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

 

 

<div class="spacegallery" id="myGallery">
<img src="هنا ضع رابط الصورة"/>

<img src="هنا ضع رابط الصورة"/>

<img src="هنا ضع رابط الصورة"/>

<img src="هنا ضع رابط الصورة"/>

<img src="هنا ضع رابط الصورة"/>

</div>

إذا أردت زيادة عدد الصور يكفي تنسخ الرابط باللون الأزرق و تضيف الصور التي تريد.

 

أتمنى أن يكون الموضوع نال إعجابك فلا تبخل علينا بتعليقاتك فهذا يشرفنا.