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

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

 

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

 

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

 

 Spacegallery.

 

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

 

 

view demo

 

 

الأن بعد أن رأيت روعة هذا الكود قم بتحميل ملفات 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(http://2.bp.blogspot.com/_dsEG33PDaHw/TZUg9AbaMDI/AAAAAAAABQQ/fm_HIeX8MPg/ajax_small.gif) 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 ثوان :)

هناك 5 تعليقات:

  1. أضافة جميلةً جداً ومميزةَ
    تضفيِ شكلَ رائعَ للمدونةً
    شكراً لمجهودكَ المميزَ
    دمتَ بخيرَ

    ردحذف
  2. @زحَ’ـمةَ حَ’ـڪيّ..||≈ العفو و هذا بفضل تشجيعكم لي و تعليقاتكم المحفزة

    حفظك الله و سدد خطاك

    ردحذف
  3. حركة جميلة اوى
    بس للأسف مش نفعت معايا عشان انا عاوزها لموقعى
    وغالبا بستخدم صور سكرين شوت و بتبأه ابعادها 1280*720
    فبتبأه كبيرة اوى ومش باينة
    للأسف :( اهئ اهئ

    ردحذف
  4. @Bidooo أهلا بك أخي الكريم

    على العموم الإضافة شغالة و مجربة و بخصوص الصور يمكنك التقليل من حجمها لتتناسب مع الإضافة

    أهلا بك مرة أخرى

    ردحذف
  5. مدونه مفيده وتستحق المتابعه تقبل مروري






    مدونة غرائب

    ردحذف