سكربت معرض الجاليرى Jqeury

الملف الشخصي · 11-30-2010 05:31 PM

سكربت معرض الجاليرى Jqeury

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

مثال عن المعرض : http://paltun.net/jqeury/gallery

طريقة التركيب:
لمن يريد تركيب المعرض في صفحة منفردة فقط قم برفع الملفات على المجلد الفرعي الخاص به و خلاص
اما لمن يريد دمج المعرض في صفحة بموقعه فقط كم بنسخ الكود التالي:

كود :

<script type="text/javascript" src="mootools-yui-compressed.js"></script>

    <link rel="stylesheet" href="1.css" />

<div class="container">

<div class='thumb'>

    <div class='someContent'>

        <div class='content'>هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع   </div>

        <div class='more'><a href="http://www.google.com" target="_blank">الموقع &raquo;</a></div>

    </div>

    <div class='divLeft' style='left:0px'>

        <div class='divLeftImage' style='background:url(7.jpg);'></div>

        <div class='divLeftShadow'></div>

    </div>

    <div class='divRight' style='left:0px;background-image:url(7.jpg);'></div>

    <img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png"/>

</div>

<div class='thumb'>

    <div class='someContent'>

        <div class='content'>هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع  </div>

        <div class='more'><a href="http://www.google.com" target="_blank">الموقع &raquo;</a></div>

    </div>

    <div class='divLeft' style='left:0px'>

        <div class='divLeftImage' style='background:url(6.jpg);'></div>

        <div class='divLeftShadow'></div>

    </div>

    <div class='divRight' style='left:0px;background-image:url(6.jpg);'></div>

    <img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png"/>

</div>

<div class='thumb'>

    <div class='someContent'>

        <div class='content'>هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع  <br /></div>

        <div class='more'><a href="http://www.google.com" target="_blank">الموقع&raquo; </a></div>

    </div>

    <div class='divLeft' style='left:0px'>

        <div class='divLeftImage' style='background:url(8.jpg);'></div>

        <div class='divLeftShadow'></div>

    </div>

    <div class='divRight' style='left:0px;background-image:url(8.jpg);'></div>

    <img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png"/>

</div>

<div class='thumb'>

    <div class='someContent'>

        <div class='content'>هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع   </div>

        <div class='more'><a href="http://www.google.com" target="_blank">الموقع &raquo;</a></div>

    </div>

    <div class='divLeft' style='left:0px'>

        <div class='divLeftImage' style='background:url(9.jpg);'></div>

        <div class='divLeftShadow'></div>

    </div>

    <div class='divRight' style='left:0px;background-image:url(9.jpg);'></div>

    <img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png"/>

</div>

<div class='thumb'>

    <div class='someContent'>

        <div class='content'>هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع .</div>

        <div class='more'><a href="http://www.google.com" target="_blank">الموقع &raquo;</a></div>

    </div>

    <div class='divLeft' style='left:0px'>

        <div class='divLeftImage' style='background:url(10.jpg);'></div>

        <div class='divLeftShadow'></div>

    </div>

    <div class='divRight' style='left:0px;background-image:url(10.jpg);'></div>

    <img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png"/>

</div>

<div class='thumb'>

    <div class='someContent'>

        <div class='content'>هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع هنا يكتب وصف قصير للموقع </div>

        <div class='more'><a href="http://www.google.com" target="_blank">الموقع &raquo;</a></div>

    </div>

    <div class='divLeft' style='left:0px'>

        <div class='divLeftImage' style='background:url(11.jpg);'></div>

        <div class='divLeftShadow'></div>

    </div>

    <div class='divRight' style='left:0px;background-image:url(11.jpg);'></div>

    <img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png"/>

</div>

<div style='float:right;clear:both;font-family:Traditional Arabic, Arial;font-size:15px;'>

    <b><a class='link' href="http://www.google.com">العودة للصفحة الرئيسية</a></b>

</div>

</div>

<script type="text/javascript">

window.addEvent('domready',function(){

$$('div.thumb').each(function(div){

    div.getElement('div.someContent').set('tween', {duration:'700'});

    div.getElement('div.divLeft').set('tween', {duration: '450'});

    div.getElement('div.divRight').set('tween', {duration: '450'});

    div.addEvent('mouseenter',function(e){

        this.getElement('div.divLeft').tween('left','-70px')

        this.getElement('div.divRight').tween('left','80px')

        this.getElement('div.someContent').tween("background-position", "-20px 0px");

    })

    div.addEvent('mouseleave',function(e){

        this.getElement('div.divLeft').tween('left','0px')

        this.getElement('div.divRight').tween('left','0px')

        this.getElement('div.someContent').tween("background-position", "0px -167px");

    })

})

})

</script>

ثم قم برفع الملفات الى الجذر الرئيسي لموقعك ما عدا ملف index.html
التعديل على المعرض:
للتعديل على الصور الافتراضية فقط قم بتعويضها بصور جديدة بمقاس 180/180 و بنفس المسمى
-لمن يريد التعديل على حجم الصور و نوع الخط و الخلفية فقط عليك التعديل على ملف 1.css

لتحميل المعرض بالمرفقات

ادارة سكيورتي العرب

المواضيع المحتمل أن تكون متشابهة .
سكربت موقع ستايلي
سكربت معرض الصور
سكربت التوبيكات 1.7.7
سكربت مركز تحميل الملفات Kleeja باصداره الجديد
سكربت الشبكة الاسلامية
سكربت الاناشيد Inshad 1.0
سكربت دليل مواقع نواحى nwahy 2.2
سكربت مكتبة الكتب لنواحى nwahy
سكربت مقالات نواحى nwahy 2.1
سكربت PHP Melody 1.6.7.1 + قاعدة بيانات 1500 فيديو