|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
10-15-2012, 12:19 PM | #1 |
مدون نشيط
تاريخ التسجيل: Jul 2012
الدولة: Algeria,Adrar
المشاركات: 178
|
أفضل معرض صور احترافي
السلام عليكم
و كالعادة من أخوكم Nassro مع الإضافات السهلة و الإحترافية اليوم جايب ليكم كود سهل التركيب لمعرض صور خفيف على المدونة و احترافي في تبديل الصور و لمعاينة الإضافة http://iwares0.blogspot.com/ نأتي الى طريقة التركيب السهلة قم بأضافة أداة من نوع HTML ولصق فيها الكود التالي كود بلغة HTML:
<script src='http://code.jquery.com/jquery-latest.js'></script> <script src='http://mybloggertricks.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'></script> <script src='http://mybloggertricks.googlecode.com/files/mycarousel.js' type='text/javascript'></script> <style> .jcarousel-skin-tango .jcarousel-container { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background: #F0F6F9; } .jcarousel-skin-tango .jcarousel-direction-rtl { direction: rtl; } .jcarousel-skin-tango .jcarousel-container-horizontal { width:425px; padding: 20px 40px; } .jcarousel-skin-tango .jcarousel-container-vertical { width: 75px; height: 245px; padding: 40px 20px; } .jcarousel-skin-tango .jcarousel-clip { overflow: hidden; } .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 425px; height: 75px; } .jcarousel-skin-tango .jcarousel-clip-vertical { width: 75px; height: 245px; } .jcarousel-skin-tango .jcarousel-item { width: 75px; height: 75px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-left: 0; margin-right: 10px; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left: 10px; margin-right: 0; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: 10px; } .jcarousel-skin-tango .jcarousel-item-placeholder { background: #fff; color: #000; } /** * Horizontal Buttons */ .jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top: 43px; right: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal { left: 5px; right: auto; background-image: url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png); } .jcarousel-skin-tango .jcarousel-next-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-horizontal:focus { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-next-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; top: 43px; left: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal { left: auto; right: 5px; background-image: url(http://mybloggertricks.googlecode.com/files/next-horizontal.png); } .jcarousel-skin-tango .jcarousel-prev-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-horizontal:focus { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -96px 0; } /** * Vertical Buttons */ .jcarousel-skin-tango .jcarousel-next-vertical { position: absolute; bottom: 5px; left: 43px; width: 32px; height: 32px; cursor: pointer; background: transparent url(http://mybloggertricks.googlecode.com/files/next-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-next-vertical:hover, .jcarousel-skin-tango .jcarousel-next-vertical:focus { background-position: 0 -32px; } .jcarousel-skin-tango .jcarousel-next-vertical:active { background-position: 0 -64px; } .jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active { cursor: default; background-position: 0 -96px; } .jcarousel-skin-tango .jcarousel-prev-vertical { position: absolute; top: 5px; left: 43px; width: 32px; height: 32px; cursor: pointer; background: transparent url(http://mybloggertricks.googlecode.com/files/prev-horizontal.png) no-repeat 0 0; } .jcarousel-skin-tango .jcarousel-prev-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-vertical:focus { background-position: 0 -32px; } .jcarousel-skin-tango .jcarousel-prev-vertical:active { background-position: 0 -64px; } .jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active { cursor: default; background-position: 0 -96px; } </style> <ul id="mycarousel" class="jcarousel-skin-tango"> <li><a href="#"><img src=" <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> <li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> </ul> # برابط موضوع الصورة و ادا أردت اضافة عدة صور أنسخ كود بلغة HTML:
<li><a href="#"><img src="IMAGE LINK" width="75" height="75" alt="Description" /></a></li> أتمنى أن تكون هده الإضافة قد عجبت الجميع أنتظر ردودكم الحلوة www.3arabsecurity.uni.me
__________________
|
12-17-2012, 07:45 PM | #2 |
مدون مميز
تاريخ التسجيل: May 2012
المشاركات: 320
|
رد: أفضل معرض صور احترافي
لم تعمل معي بالشكل المطلوب ! حيث تظهر كل صورة في سطر لوحدها # أعتقد المشكلة في اكواد الجافا , ربما لم تعد تعمل ويجب تجديدها ,. تقبل مروري وشكراً لك .
__________________
أضف مدونتك في دليل تثمين للمدونات http://tathmen.blogspot.com/ .: أشهد أن لا إله الا الله وأشهد أن محمداً عبده ورسوله :. |
12-17-2012, 07:47 PM | #3 |
مدون مميز
تاريخ التسجيل: May 2012
المشاركات: 320
|
رد: أفضل معرض صور احترافي
لم تعمل معي بالشكل المطلوب ! حيث تظهر كل صورة في سطر لوحدها # أعتقد المشكلة في اكواد الجافا , ربما لم تعد تعمل ويجب تجديدها ,. تقبل مروري وشكراً لك .
__________________
أضف مدونتك في دليل تثمين للمدونات http://tathmen.blogspot.com/ .: أشهد أن لا إله الا الله وأشهد أن محمداً عبده ورسوله :. |
12-20-2012, 09:13 PM | #4 |
مدون جديد
تاريخ التسجيل: Oct 2012
المشاركات: 21
|
رد: أفضل معرض صور احترافي
__________________
مدونتي المتواضعة http://www.histgeo-college.blogspot.com/ |
مواقع النشر (المفضلة) |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
قالب احترافي لعرض الأفلام | مصري وافتخر | قوالب بلوجر عربية ومعربة | 2 | 08-18-2013 10:00 AM |
قالب لعرض الفيديوهات | saheralialy | قوالب بلوجر أجنبية | 0 | 01-22-2013 03:11 PM |
قالب لعرض الافلام | saheralialy | قوالب بلوجر أجنبية | 0 | 01-22-2013 03:01 PM |
طلب قالب لعرض البرامج | كوبا كبانا | طلبات قوالب بلوجر | 0 | 10-12-2012 04:50 PM |
seo أفضل لبلوجر | tao101 | دروس بلوجر | 9 | 09-08-2012 12:16 AM |
الساعة الآن 08:23 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |