الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

كيفية دمج عارض الصور في الموقع

بدأه salytwo في 4 يوليو 2011 · 4 رد · 1,046 مشاهدة · في ASP.NET
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم ورحمة الله وبركاته

لدي عارض صور كما في الرابط

http://slidesjs.com/examples/images-with-captions/

كيف ادرجه في موقعي

الرجاء مساعدتي ولكم مني جزيل الشكر والامتنان

#2

السلام عليكم ورحمه الله وبركاته

اخي ببساطة قم بنسخ ملفات ال jQuery ومن ثم قم بوضع الكود التالي في الوسم head


<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>

وفي الوسم body قم بوضع الوسم div على النحو التالي


<div id="example">
<img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
<div id="slides">
<div class="slides_container">
<div class="slide">
<a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
<div class="caption" style="bottom:0">

<p>Happy Bokeh Thursday!</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg" width="570" height="270" alt="Slide 2"></a>
<div class="caption">
<p>Taxi</p>
</div>

</div>
<div class="slide">
<a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-3.jpg" width="570" height="270" alt="Slide 3"></a>
<div class="caption">
<p>Happy Bokeh raining Day</p>
</div>
</div>
<div class="slide">

<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
<div class="caption">
<p>We Eat Light</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
<div class="caption">

<p>“I must go down to the sea again, to the lonely sea and the sky...”</p>
</div>
</div>
<div class="slide">
<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
<div class="caption">
<p>twelve.inch</p>
</div>

</div>
<div class="slide">
<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
<div class="caption">
<p>Save my love for loneliness</p>
</div>
</div>
</div>

<a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>

مع مراعاة تغيير الصور والروابط

تم تعديل هذه المشاركة بواسطة VB Helper في 4 يوليو 2011 في 17:57

1

.:: Wish to become better and better ::.

#3

العفو ما شفت ردك الا الان يكن اني ما عملت تحديث للصفحة

على كل سأجرب طريقتك وارجع لك خبرها

تم تعديل هذه المشاركة بواسطة salytwo في 5 يوليو 2011 في 09:02

#4

اخي الكريم جزاك الله خير

بس دمجت الاكواد وعدلت روابط الصور مع روابط ملفات السكربتات بس تطلع لي صور التالي والسابق وصورة NEW بأعلى يسار عارض الصور

بس لاحظت ظهور علامة # في رابط الصفحة لما اضغط على السابق او التالي في عرض الصور

سؤال اخر هو ان السكربت مش محدد فيه اي لغه؟ وقمت جربت الاثنين بدون تحديد لغه و بتحديد لغه الجافا سكربت بس دون جدوى

ومازلت احاول بس لحد الان ما نجحت

شكرا اخي

#5

السلام عليكم ورحمه الله وبركاته

اخي بالنسبة لل # ماهو الا رابط لنفس الصفحة, بس وظيفته ينفذ كود معين عند النقر, اما بالنسبة للسكربتات قم بفتح مصدر صفحة الالبوم وقم بنسخ الروابط وبعدها قم بتنزيلها

.:: Wish to become better and better ::.

مواضيع مشابهة