wersja skryptu MyBB: 1.8.3
adres forum: www.DreamSkill.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): czy ktos moze mi podac dokladna instrukcje jak dodac ten slider na strone glowna:
http://jquery.waw.pl/slidery/prosty-slider/
Ja robię to tak:
Nie zmieniając struktury wrzucam pliki z folderu js i images...
Dodaje kod CSS. Podany w przykładzie 05 bodajże (dostępne przy pobraniu ale chodzi o ten sam co jest na demo).
Dodaje odpowiedni div na stronie głównej przed panelem bocznym, wyswietla mi sie tylko pierwsza grafika i nic wiecej.
Pokaż jakie i gdzie kody wrzucasz.
w Global.css
Kod:
#slider{}
#slider ul, #slider li, #slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
p#controls, p#controls2{
margin:0;
position:relative;
}
#prevBtn, #nextBtn, #prevBtn2, #nextBtn2{
display:block;
margin:0;
overflow:hidden;
text-indent:-8000px;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:-160px;
}
#nextBtn, #nextBtn2{
left:696px;
}
#prevBtn a, #nextBtn a, #prevBtn2 a, #nextBtn2 a{
display:block;
width:30px;
height:77px;
background:url(images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #nextBtn2 a{
background:url(images/btn_next.gif) no-repeat 0 0;
}
w szablonach > strona główna > index
Kod:
<div id="slider" style="width: 696px; height: 241px; overflow: hidden;">
<ul style="width: 3480px; margin-left: -2681.15581432154px;">
<li style="float: left;"><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview"></a></li>
<li style="float: left;"><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview"></a></li>
<li style="float: left;"><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview"></a></li>
<li style="float: left;"><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview"></a></li>
<li style="float: left;"><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview"></a></li>
</ul>
</div>
A JS?
do headerinclude:
Kod:
<script type="text/javascript" src="ścieżka do pliku/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
dodałem, nie wiem czy to nie jest cos z tymi divami albo css. bo zobacz jak to na glownej (dreamskill.pl) teraz wyglada, pod tabelką z serwerami.
Plik easySlider1.5.js wrzuć do katalogu js na FTP.
Jest wrzucony od samego początku
no to pokaż tutaj szablon headerinclude.
Oto i on:
Kod:
<script type="text/javascript" src="/domains/dreamskill.pl/public_html/js/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
$("#slider2").easySlider({
controlsBefore: '<p id="controls2">',
controlsAfter: '</p>',
prevId: 'prevBtn2',
nextId: 'nextBtn2'
});
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,200italic,400italic,600italic' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1800"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1800"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1800"></script>
<script type="text/javascript" src="images/vienna/jquery-ui.js"></script>
<script type="text/javascript" src="images/vienna/jquery.tipsy.js"></script>
<script type="text/javascript" src="images/vienna/jquery.cookie.js"></script>
<script type='text/javascript'>
jQuery(function() {
jQuery("a").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("title").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("img").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("i").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("span").tipsy({gravity: jQuery.fn.tipsy.autoNS});
jQuery("div").tipsy({gravity: jQuery.fn.tipsy.autoNS});
});
</script>
{$stylesheets}
<script type="text/javascript">
<!--
lang.unknown_error = "{$lang->unknown_error}";
lang.select2_match = "{$lang->select2_match}";
lang.select2_matches = "{$lang->select2_matches}";
lang.select2_nomatches = "{$lang->select2_nomatches}";
lang.select2_inputtooshort_single = "{$lang->select2_inputtooshort_single}";
lang.select2_inputtooshort_plural = "{$lang->select2_inputtooshort_plural}";
lang.select2_inputtoolong_single = "{$lang->select2_inputtoolong_single}";
lang.select2_inputtoolong_plural = "{$lang->select2_inputtoolong_plural}";
lang.select2_selectiontoobig_single = "{$lang->select2_selectiontoobig_single}";
lang.select2_selectiontoobig_plural = "{$lang->select2_selectiontoobig_plural}";
lang.select2_loadmore = "{$lang->select2_loadmore}";
lang.select2_searching = "{$lang->select2_searching}";
var cookieDomain = "{$mybb->settings['cookiedomain']}";
var cookiePath = "{$mybb->settings['cookiepath']}";
var cookiePrefix = "{$mybb->settings['cookieprefix']}";
var deleteevent_confirm = "{$lang->deleteevent_confirm}";
var removeattach_confirm = "{$lang->removeattach_confirm}";
var loading_text = '{$lang->ajax_loading}';
var saving_changes = '{$lang->saving_changes}';
var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
var my_post_key = "{$mybb->post_code}";
var rootpath = "{$mybb->settings['bburl']}";
var imagepath = "{$theme['imgdir']}";
var yes_confirm = "{$lang->yes}";
var no_confirm = "{$lang->no}";
var MyBBEditor = null;
var spinner_image = "{$theme['imgdir']}/spinner.gif";
var spinner = "<img src='" + spinner_image +"' alt='' />";
// -->
</script>
Kod:
<script type="text/javascript" src="/domains/dreamskill.pl/public_html/js/easySlider1.5.js"></script>
zamień na:
Kod:
<script type="text/javascript" src="js/easySlider1.5.js"></script>
Bez zmian. A może pomożesz przy jakimś innym Sliderze, chodzi mi po prostu o prostotę.
Chcę slider na 5 okienek z przyciskami obok, na czy po bokach które po kliknięciu włączają odpowiedni obrazek, a tak to sam się zmienia co ileś sekund... coś jak jest na skillconnect.eu tylko ze nie chce identycznego ale cos na podobę ;D
Jak chcesz coś prostego, to wstaw po prostu marquee a wewnątrz 5 <img />
Minus taki, że nie będziesz miał strzałek do przełączenia.
Snake, a gdzie jest download css tego? Bo tam jest tylko do js i kod na główną...
To w miejsce wyświetlania:
Kod:
<div id="loopedSlider">
<div class="container">
<div class="slides" style="width: 2000px; left: 0px;">
<div style="position: absolute; left: 0px; display: block;"><a href="http://www.redhat.com"><img width="500" height="375" src="https://www.jboss.org/dms/testimages/images/image-01.jpg" alt="First Image"></a></div>
<div style="position: absolute; left: 500px; display: block;"><a href="http://fedoraproject.org/"><img width="500" height="375" src="https://www.jboss.org/dms/testimages/images/image-02.jpg" alt="Second Image"></a></div>
<div style="position: absolute; left: 1000px; display: block;"><a href="http://www.jboss.com"><img width="500" height="375" src="https://www.jboss.org/dms/testimages/images/image-03.jpg" alt="Third Image"></a></div>
<div style="position: absolute; left: -500px; display: block;"><a href="http://www.jboss.org"><img width="500" height="375" src="https://www.jboss.org/dms/testimages/images/image-04.jpg" alt="Fourth Image"></a></div>
</div>
</div>
<a href="#" class="previous"><img width="22" height="22" src="https://www.jboss.org/dms/testimages/images/previous.png" alt="Previous"></a>
<a href="#" class="next"><img width="22" height="22" src="https://www.jboss.org/dms/testimages/images/next.png" alt="Next"></a>
<ul class="pagination">
<li class=" active"><a href="#" rel="1">1</a></li>
<li class=" "><a href="#" rel="2">2</a></li>
<li class=" "><a href="#" rel="3">3</a></li>
<li class=" "><a href="#" rel="4">4</a></li>
</ul>
</div>
To np. do headerinclude:
Kod:
<script type="text/javascript" charset="utf-8">
$(function(){
$('#loopedSlider').loopedSlider({
autoStart: 3500,
restart: 15000
});
$('#newsSlider').loopedSlider({
autoHeight: 400
});
});
</script>
A to do nowego pliku i odnośniek w headerinclude:
http://jsfiddle.net/5mkk4d78/