إضافة عارض صور لمدونة بلوجر - مقدم من مدونة الخبراء للبرامج

01-13-2014, 09:50 PM

hanna

مدون جديد

تاريخ التسجيل: Aug 2013

المشاركات: 27

إضافة عارض صور لمدونة بلوجر - مقدم من مدونة الخبراء للبرامج

أنا : hanna

سجل معنا لتتمتع بهذه الخاصية

نموذجان من عارض الصور لمدونة بلوجر للأمانة الإضافة مقدمة من مدونة الخبراء للبرامج

- نبداء على بركة الله

- طريقة تركيب الإضافة :
1- ادخل إلى مدونتك / واختر تحرير قالب

2- ابحث عن الوسم </head>

3- ضع الكود التالي والذي ترغب فيه من النموذجان فوقه

4- ثم احفظ القالب

- النموذج الأول :

الكود :

كود بلغة HTML:

[CENTER]<style type='text/css'>
#image-gallery {display: none;}
  #jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}
  #jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}
  #jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}
  #jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}
</style>
 <script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>
[/CENTER]

- النموذج الثاني :

الكود :

كود بلغة HTML:

[CENTER]<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
</style>
 <script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>
[/CENTER]

- بعد ذلك اذهب إلى تخطيط / إضافة أداة وأضف الكود التالي :

الكود :

كود بلغة HTML:

[CENTER] <div style="position:relative;">
<ul id="image-gallery">
<li><img src="رابط الصورة1" /></li>
<li><img src="رابط الصورة2" /></li>
<li><img src="رابط الصور3" /></li>
<li><img src="رابط الصورة4" /></li>
<li><img src="رابط الصورة5" /></li>
</ul>
</div>
[/CENTER]

- في حال كنت بحاجة إلى إضافة وصلات إلى الصور الخاصة بك، وإضافة هذا الهيكل HTML بدلا من ذلك:

الكود :

كود بلغة HTML:

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="رابط الوصلة"><img src=" رابط الصورة" /></a></li>
<li><a href="رابط الوصلة"><img src="رابط الصورة" /></a></li>
<li><a href="رابط الوصلة"><img src="رابط الصورة" /></a></li>
<li><a href="رابط الوصلة"><img src="رابط الصورة" /></a></li>
<li><a href="رابط الوصلة"><img src="رابط الصورة" /></a></li>
</ul>
</div>

- احفظ الإضافة
ومبروك عليك عارض الصور

المصدر :
http://experts-program.blogspot.com/...g-post_13.html

__________________

من مواضيع hanna

التعديل الأخير تم بواسطة hanna ; 01-13-2014 الساعة 09:56 PM

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)

عارض ، صور

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة لا تستطيع الرد على المواضيع لا تستطيع إرفاق ملفات لا تستطيع تعديل مشاركاتك BB code is متاحة الابتسامات متاحة كود [IMG] متاحة كود HTML معطلة قوانين المنتدى

الانتقال السريع

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
شرح إضافة فهرس متطور لمدونة بلوجر	OSMON	دروس بلوجر	8	12-25-2014 06:33 PM
16 استايل لإيقونات المواقع الإجتماعية عالية الجودة مقدمة من مدونة الخبراء للبرامج	hanna	إضافات وأدوات بلوجر	3	01-12-2014 04:43 PM
إضافة صندوق إعجاب الفيسبوك بشكل جديد 2014 لمدونة بلوجر - مقدم من مدونة الخبراء للبرا	hanna	إضافات وأدوات بلوجر	1	01-11-2014 12:41 PM
قالب مدونة الخبراء للبرامج في غاية الروعة والجمال	hanna	قوالب بلوجر عربية ومعربة	1	01-11-2014 12:26 PM
إضافة أرشيف لمدونة بلوجر	mostafa alwin	إضافات وأدوات بلوجر	1	07-16-2012 12:35 AM

إضافة عارض صور لمدونة بلوجر - مقدم من مدونة الخبراء للبرامج

إضافات وأدوات بلوجر