سلام دوستان میخواستم پست قبلی را ویرایش کنم اما گفتم اگر این آموزش را هم در پست اول بذارم خیلی طولانی میشه به همین خاطر یک پست دیگر زدم
برای تغییر در اسلایدر باید صفحات جداگانه ایجاد کنید به شکل زیر
ابتدا یک صفحه جداگانه با قالب جداگانه ایجاد و کد های زیر را به جای کد های موجود در آنجا می ریزید از طریق این صفحه میتوانید عکس های اسلایدر را تغییر بدید
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>parsian-theme.ir</title><link rel="stylesheet" href="styles/nivo-slider.css" type="text/css" media="screen" /><link rel="stylesheet" href="style.css" type="text/css" media="screen" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><script src="http://jodayi.com/themes/Meloodiuos-Nj/image slide/scripts/cufon-yui.js" type="text/javascript"></script><script src="http://jodayi.com/themes/Meloodiuos-Nj/image slide/scripts/Museo_Slab.font.js" type="text/javascript"></script><script src="http://jodayi.com/themes/Meloodiuos-Nj/image slide/scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script><script type="text/javascript">Cufon.replace('h2', { fontFamily:'Museo Slab' });Cufon.replace('h3', { fontFamily:'Museo Slab' });$(window).load(function() { $('#slider1').nivoSlider({ pauseTime:5000, pauseOnHover:false }); setTimeout(function(){ $('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false }); }, 1000); setTimeout(function(){ $('#slider3').nivoSlider({ pauseTime:5000, pauseOnHover:false, controlNavThumbs:true }); }, 2000); setTimeout(function(){ $('#slider4').nivoSlider({ effect:'random', animSpeed:1500, pauseTime:5000, startSlide:2, directionNav:false, controlNav:true, keyboardNav:false, pauseOnHover:false }); }, 3000);});</script></head><body><div id="debug"></div><div id="wrapper"> <div id="content"> <div id="slider2" class="nivoSlider"><!----عکس های اسلایدر-----><a target="_blank" href="#"><img src="http://binam2013.persiangig.com/image/Beautiful%20Mix%20HD%20Wallpaper%20%2303%20-%20p30download.com%20-%20020.jpg" alt="" title="سایت | عاشقانه | جدایی"/></a><a target="_blank" href="#"><img src="http://binam2013.persiangig.com/image/5s1kihlg0oqdwt7nd31.jpg" alt="" title="سایت | عاشقانه | جدایی" /></a><a target="_blank" href="#"><img src="http://binam2013.persiangig.com/image/79216646118536752079.jpg" alt="" title="سایت | عاشقانه | جدایی" /></a><a target="_blank" href="#"><img src="http://binam2013.persiangig.com/image/001.jpg" alt="" title="سایت | عاشقانه | جدایی" /></a><a target="_blank" href="#"><img src="http://binam2013.persiangig.com/image/645149531193511.jpg" alt="" title="سایت | عاشقانه | جدایی" /></a><!----عکس های اسلایدر-----> </div> </div> </div><!--ipt type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</scri--><!--ipt type="text/javascript">try {var pageTracker = _gat._getTracker("UA-3892196-15");pageTracker._trackPageview();} catch(err) {}</scri--></body></html>
حالا یک صفحه جداگانه با استفاده به شکل بالا ایجاد میکنید و کدهای زیر را داخل آن میریزید این صفحه هم برای تغییر در اسلایدر متنی است و میتوانید از طریق این صفحه متن های اسلایدر را تغییر سمت راست را تغییر بدید همچنین عکس های کوچک کنار متن ها را
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery custom scrollbar vertical</title><style type="text/css"><!--body {margin:0; padding:0;}#customScrollBox{position:relative; height:280px; overflow:hidden;}#customScrollBox .container{position:relative; width:231px; top:0; float:left;}#customScrollBox .content{clear:both;}#customScrollBox .content p{padding:10px 5px; margin:10px 0; color:#999999; font-family:Tahoma; font-size:10px;}#customScrollBox img {-moz-border-radius:4px!important;border:2px solid #666!important;-moz-box-shadow: 1px 8px 85px #ccc }#dragger_container{position:relative; width:0px; height:250px; float:left; margin:10px 0 0 10px; border-left:1px solid #666666;}#dragger{position:absolute; width:19px; height:41px; background:url(custom_scrollbar_bg.png) no-repeat center center;}--></style><script type="text/javascript" src="http://jodayi.com/themes/Meloodiuos-Nj/jquery_custom_scroller/jquery_custom_scrollbar_vertical_full_files/jquery_003.js"></script><script src="http://jodayi.com/themes/Meloodiuos-Nj/jquery_custom_scroller/jquery_custom_scrollbar_vertical_full_files/jquery-ui.js"></script><script type="text/javascript" src="http://jodayi.com/themes/Meloodiuos-Nj/jquery_custom_scroller/jquery_custom_scrollbar_vertical_full_files/jquery.js"></script><script type="text/javascript" src="http://jodayi.com/themes/Meloodiuos-Nj/jquery_custom_scroller/jquery_custom_scrollbar_vertical_full_files/jquery_002.js"></script></head><body style="cursor: auto;"><div id="outer_container"><div id="customScrollBox"> <div style="top: 0px;" class="container"> <div class="content" align="right"><img src="http://binam2013.persiangig.com/image/slider/ahmet_ko%C3%A7%20%282%29.jpg" title="موسیفی بی کلام" alt="موسیفی بی کلام" class="thumb"> <p><b><font color="red" size="2">موسیقی</font></b><br><strong>موسیقی بی کلام «Kaderimin Oyunu» از «Ahmet Koch» </strong><br>احمد (یا آحمت) کوچ یکی از نوازندگان و آهنگسازان نوگرای ترکیه هست که ساز تخصیصش باغلاما - باغلامای الکترونیک هستکه البته صدای باقلامای الکترونیک رو ممکنه با صدای گیتار الکتریک اشتباه بگیرید.آهنگ زیبای «Kaderimin Oyunu» اثر احمد،که وی با هنرمندی هرچه تمام این آهنگ رو نواخته است.</p> <hr size="1" width="100%"><img src="http://binam2013.persiangig.com/image/slider/Old_paper_pen%5Bwww_jodayi_com%5D.jpg" title="سخنان بزرگان" alt="سخنان بزرگان" class="thumb"> <p><b><font color="red" size="2">سخنان بزرگان</font></b><br><strong>چند سخن زیبا و تامل بر انگیز از بزرگان</strong><br>همیشه بدنبال تمایز دیدگاه مردم خودمان ( بستر فرهنگی ایران از کشمیر تا مدیترانه ) با مردم شرق و غرب بودم .تا رسیدم به مطلبی از دکتر محمد مسعود تاجیک که :در واقع متفکرین جوامع مانند کانون تجمع نور یک ذره بین هستند .با شناخت آنها می توان به هزاران طول موج انعکاس یافته از فرهنگ ملل دست یافت .بطور مثال شناخت درست و اندیشمندانه فلسفه ماکیاول در غرب می تواند ما را به چرایی استعمارگری و همچنین بدخویی غرب رهنمون سازدشناخت درست عقاید فرانتس فانون می تواند بسیاری از مجهولات در آفریقا و بخصوص سرزمین الجزایر را به ما نشان دهد .شناخت درست سیدقطب در مصر می تواند بخش بسیار بزرگی از عقاید مذهبی مردم مصر را برای ما روشن و آشکار سازدشناخت درست تاگور فیلسوف هند می تواند ما را با روح حاکم بر این کشور آشنا سازد....</p> <hr size="1" width="100%"><img src="http://binam2013.persiangig.com/image/slider/wallpapere%20bahari.jpg" title="والپیپر" alt="والپیپر" class="thumb"> <p><b><font color="red" size="2">والپیپر</font></b><br><strong>والپیپرهای زیبای بهاری</strong><br>محیط زیست طبیعی سالم تأثیر شگرفی بر روح و روان آدمی دارد. محیط پاک و آراسته و خرّم، زندگی را شاداب و معطر می سازد. شنیدن آواز روح بخش پرندگان، ترنم لطیف جویباران، آهنگ دلربای چشمه ساران، صفای سبز سبزه زاران، نسیم لطیف کوهستان، رقص دلنشین درختان و زیبایی شهر و دیار، همه و همه تأثیر اعجاب انگیزی بر زندگی و حیات انسان دارند. هر کسی از تماشای چنین منظره های زیبایی احساس آرامش و نشاط کرده و امنیت و آسایش را در حیات خویش لمس می کند.با آمدن فصل بهار و طبیعت زیبای آن،بر آن شدیم تا یک سری از والپیپر های زیبای بهاری را برای شما عزیزان قرار بدیم </p> <hr size="1" width="100%"><img src="http://binam2013.persiangig.com/image/slider/11182_945%20copy.jpg" title="دیکلمه" alt="دیکلمه" class="thumb"> <p><b><font color="red" size="2">دیکلمه ای از استاد شهریار </font></b><br><strong>دیکلمه پیرم و گاهی دلم یاد جوانی میکند</strong><br>سید محمد حسین بهجت تبریزی در سال 1285 هجری شمسی در روستای زیبای « خوشکناب » آذربایجان متولد شده است. او در خانواده ای متدین ، کریم الطبع واهل فضل پا بر عرصه وجود نهاد. پدرش حاجی میر آقای خوشکنابی از وکلای مبرز و فاضل وعارف روزگار خود بود که به سبب حسن کتابتش به عنوان خوشنویسی توانا مشهور حدود خود گشته بود. «یاد جوانی» اثری بسیار زیبا از استاد است که یا صدای خوش آهنگ استاد آماده دانلود میباشد </p></div> </div> <div id="dragger_container"> <div class="ui-draggable" style="display: block; background: url(custom_scrollbar_bg.png) repeat scroll 0% 0% transparent; top: 0px;" id="dragger"></div> </div></div><script>$(window).load(function() { $customScrollBox=$("#customScrollBox"); $customScrollBox_container=$("#customScrollBox .container"); $customScrollBox_content=$("#customScrollBox .content"); $dragger_container=$("#dragger_container"); $dragger=$("#dragger"); CustomScroller(); function CustomScroller(){ outerMargin=42; innerMargin=62; visibleHeight=250-outerMargin; if($customScrollBox_container.height()>visibleHeight){ //custom scroll depends on content height $dragger_container,$dragger.css("display","block"); totalContent=$customScrollBox_content.height(); draggerContainerHeight=250-innerMargin; animSpeed=400; //animation speed easeType="easeOutCirc"; //easing type bottomSpace=1.05; //bottom scrolling space targY=0; draggerHeight=$dragger.height(); $dragger.draggable({ axis: "y", containment: "parent", drag: function(event, ui) { Scroll(); }, stop: function(event, ui) { DraggerOut(); } }); //scrollbar click $dragger_container.click(function(e) { var mouseCoord=(e.pageY - $(this).offset().top); var targetPos=mouseCoord+$dragger.height(); if(targetPos<draggerContainerHeight){ $dragger.css("top",mouseCoord); Scroll(); } else { $dragger.css("top",draggerContainerHeight-$dragger.height()); Scroll(); } }); //mousewheel $(function($) { $customScrollBox.bind("mousewheel", function(event, delta) { vel = Math.abs(delta*10); $dragger.css("top", $dragger.position().top-(delta*vel)); Scroll(); if($dragger.position().top<0){ $dragger.css("top", 0); $customScrollBox_container.stop(); Scroll(); } if($dragger.position().top>draggerContainerHeight-$dragger.height()){ $dragger.css("top", draggerContainerHeight-$dragger.height()); $customScrollBox_container.stop(); Scroll(); } return false; }); }); function Scroll(){ var scrollAmount=(totalContent-(visibleHeight/bottomSpace))/(draggerContainerHeight-draggerHeight); var draggerY=$dragger.position().top; targY=-draggerY*scrollAmount; var thePos=$customScrollBox_container.position().top-targY; $customScrollBox_container.stop().animate({top: "-="+thePos}, animSpeed, easeType); //with easing //$customScrollBox_container.css("top",$customScrollBox_container.position().top-thePos+"px"); //no easing } //dragger hover $dragger.mouseup(function(){ DraggerOut(); }).mousedown(function(){ DraggerOver(); }); function DraggerOver(){ $dragger.css("background", "url(custom_scrollbar_bg_over.png)"); } function DraggerOut(){ $dragger.css("background", "url(custom_scrollbar_bg.png)"); } } else { //hide custom scrollbar if content is short $dragger,$dragger_container.css("display","none"); } } //resize browser window functions $(window).resize(function() { $dragger.css("top",0); //reset content scroll $customScrollBox_container.css("top",0); $customScrollBox.unbind("mousewheel"); CustomScroller(); });});</script></div></body></html>
خوب حالا بریم سر صفحه جداگانه اصلی بعد از ایجاد صفحات جداگانه بالا صفحه جداگانه زیر را ایجاد میکنید و در داخل آن کد های زیر را می گذارید حالا
جای آدرس 1: آدرس صفحه جداگانه اولی
جای آدرس 2: آدرس صفحه جداگانه دومی را که بالا ساختیم را قرار می دهید
کد:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>mahmoodtz@yahoo.com</title></head><body><table cellpading="0" cellspacing="0" width="95" border="0" align="center"> <tr> <td><iframe src="صفحه جداگانه یک" style="margin: 0px;" scrolling="no" width="670" frameborder="0" height="250"></iframe></td> <td><iframe src="صفحه جداگانه دو" style="margin: 0px;" scrolling="no" width="280" frameborder="0" height="215"></iframe></br><img src="http://jodayi.com/themes/Meloodiuos-Nj/images/news.png" width="277" height="35"/></td> </tr></body></html>
خوب حالا که ساخت صفحات جداگانه به اتمام رسید میریم سراغ جای گذاری در قالب
قالب ان جی نسخه اسلایدر دار را از پست زیر دریافت کنید
http://news.rozblog.com/Forum/Catgory/56/Post/13493
خوب حالا در داخل قالب آدرس زیر را پیدا کنید
http://jodayi.com/themes/Meloodiuos-Nj/slider.html
و آدرس صفحه جداگانه سومی را در این قسمت قرار دهید
حالا تمام است و کنترل اسلایدر هم در اختیار شما است و هر وقت خواستید میتوانید با استفاده از صفحات جداگانه ساخته شده در آنها تغییر ایجاد کنید
این همه توضیحات دادم و غیره پس لطفا لینک های من رو از سایت حذف نکنید اگر بنر هم حذف نکنید که دیگه عالی میشه ولی لااقل لینک ها را بذارید بمونه
تذکر برای اونهایی که گزینه بالا را رعایت نمیکنند
: قالب از سایت جدایی دات کام پیروی میکند و با تغییر در فایل های css قالب بهم میرزه پس ملاحضه بفرمایید
