ألبوم صور بتقنية مختلفة : 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'/>

<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/AVvXsEgr71tP2lxVfAGtZzhWXXI2APS8nOZRrvmFdxvJ3ovJf2wb_r7Z9GH5Kco5WqPJoXvhWHO7eUtrx6ECNF0bCJXdZqeT9xi83pCVnRXFbyJDGJ_xQWruOiyeDKoQNeiXRKJxUKe_MwUF3rg/) 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>

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

 

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

إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)