mehbod.rayaneh
جمعه 13 دی 1392, 19:59 عصر
کد قالب!؟
اینی ک میگم را تست کنید! اگه جواب نداد کدهای قالب را قرار بدید :
این کدها را جایی ک میخواید اسلاید شو نمایش داده بشه قرار بدید :
<div id="example">
<img src="<?php bloginfo('template_directory'); ?>/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="لینک" title="توضیحات" target="_blank">
<img src="<?php bloginfo('template_directory'); ?>/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="لینک" title="توضیحات" target="_blank">
<img src="<?php bloginfo('template_directory'); ?>/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="لینک" title="توضیحات" target="_blank">
<img src="<?php bloginfo('template_directory'); ?>/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="لینک" title="توضیحات" target="_blank">
<img src="<?php bloginfo('template_directory'); ?>/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="لینک" title="توضیحات" target="_blank">
<img src="<?php bloginfo('template_directory'); ?>/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="لینک" title="توضیحات" target="_blank">
<img src="<?php bloginfo('template_directory'); ?>/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="لینک" title="توضیحات" target="_blank">
<img src="<?php bloginfo('template_directory'); ?>/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="<?php bloginfo('template_directory'); ?>img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="<?php bloginfo('template_directory'); ?>/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
<img src="<?php bloginfo('template_directory'); ?>/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
و این کد ها را در فایل header.php قبل از </head> :
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: '<?php bloginfo('template_directory'); ?>/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>
حالا 1 پوشه توی فولدر قالب ب نام css ایجاد کنید و از پوشه اسلایدشو فایل global.css را توی فولدر css ک ایجاد کردید قرار بدید
و مجددا 1 پوشه با نام js ایجاد و فایل slides.min.jquery.js را نیز از پوشه اسلایدر کپی کنید در پوشه js
و در آخر هم عکسهایی ک توی اسلایدر هست را در پوشه قالب در پوشه ای به نام img بریزید!
الان باید کار کنه!
اگه نکرد ک کلا کد قالبو بذارید!
موفق باشید