administrator
 
 
 4923
 21/03/2011
 |  موضوع: سلايد شو احترافي الاول مره مجانا  الخميس 25 أكتوبر 2012, 10:57 pm | |
| [b][size=12]وها نحن نغوص في عالم اكواد الجافا
لنستخرج لكم اجمل واحلي اكواد لمنتديات احلي منتدي
موضوعنا اليوم عن اضافه جميله يترقبها الكل الا وهي
سلايد شو كما في الفي بي
اليوم اقدم لكم سلايد شو مبرمج باحترافيه عاليه
كمااااااااااااااااااااااا في منتدانا
صور من السلايد
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
طريقه التركيب
لوحه الاداره
مظهر المنتدي
اداره عامه
قالب الهيدرoverall_header
ابحث عن الكود التالي
كود PHP:
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript">
وضع بعده الكود التالي
[/size][/b]  ] وايضا ابحث عن كود PHP:
والان نروح للجزء الخاص بورقه css
ضع الكود التالي في ورقه css
/********** بدايه اكواد السلايد**********/
/*
* jQuery Nivo Slider v2.3
* [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:987px;
height:247px;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
#slider {
position: relative;
width: 987px;
height: 247px;
background: url(http://im20.gulfup.com/3NAZ3.gif) no-repeat 50% 50%;
margin: auto;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position: absolute;
left: 425px;
bottom: 2px;
opacity: 0;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://im20.gulfup.com/eMkh2.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://im20.gulfup.com/vAfD1.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
.clear {
clear:both;
}
/********** نهايه اكواد السلايد**********/
وايضا يمكنك اضافه صوره اخري عبر اضافه الكود التالي
كود PHP:
a> <a href="#">
<img src="رابط الصوره الجديده هنا" alt=""/>
بعد الكود دا
كود PHP:
a> <a href="#">
<img src="https://i.servimg.com/u/f39/16/69/56/17/312310.jpg" alt=""/>
يمكنك تغيير روابط كل صوره عبر تغيير الكود دا
كود PHP:
a> <a href="#">
الي
كود PHP:
a> <a href="رابط التوجيه هنا">
| |
|
