Pomoc przy sliderze jquery

**lamusq** · 25 Października 2013

Hej!

Mam pytanie, pobrałem slider jquery stąd: http://www.basic-slider.com/

Teraz nasuwa się pytanie: jak to dodać na forum? Nigdy nie próbowałem a potrzebuje tego.

Pozdrawiam,

**teez** · 25 Października 2013

Spróbuj pierw na sztywno wszystko usadzić.

Wrzuć gdzieś

<script src="http://www.basic-slider.com/js/bjqs-1.3.min.js"></script>
<link type="text/css" rel="Stylesheet" href="https://raw.github.com/jcobb/basic-jquery-slider/master/bjqs.css" />
 
<script>
jQuery(document).ready(function($) {
$('#banner-fade').bjqs({
'height' : 320,
'width' : 620,
'responsive' : true
});
});
</script>
 
<div id="banner-fade">
<ul class="bjqs">
<li><img src="http://www.basic-slider.com/img/banner01.jpg" title="Automatically generated caption"></li>
<li><img src="http://www.basic-slider.com/img/banner01.jpg" title="Automatically generated caption"></li>
<li><img src="http://www.basic-slider.com/img/banner01.jpg" title="Automatically generated caption"></li>
</ul>
</div>

I sprawdź czy śmiga. Wstaw to gdzieś na stronie głównej i testuj. Jak bedzie śmigało to pozapisuj .css i .js, zmień ścieżkę i powinno grać.

Edytowane 25 Października 2013 przez teez

**PawelS** · 25 Października 2013

Zależy gdzie chcesz to dodać, spróbuj, a w razie czego pomogę.

Edit.

Widzę Teez dał gotowca, jednak zalecam dodanie linijki w includeJS: (dla samego porządku)

<script src="http://www.basic-slider.com/js/bjqs-1.3.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#banner-fade').bjqs({
'height' : 320,
'width' : 620,
'responsive' : true
});
});
</script>

Edytowane 25 Października 2013 przez PawelS

Macsch15 · 25 Października 2013

Automatyczna wiadomość

Temat przeniesiony z forum

Invision Power Board → Invision Power Board 3.4 → Ogólny support IPB

do

Invision Power Board → Invision Power Board 3.4 → Style - pomoc

**lamusq** · 25 Października 2013

Ehh, nie wiem jak to załapać. Dodaje na forum i niby się pokazuje, ale 3 obrazki jeden pod drugim. Jak to uformować do właściwej formy?

**PawelS** · 25 Października 2013

Nie czyta JS? Na to wychodzi.

Nie widze jak dodałeś ten kod, oraz nie wiem czy kod podany przez Teez'a działa, bo nie sprawdzałem.

Edytowane 25 Października 2013 przez PawelS

**teez** · 25 Października 2013

Może i tak trochę na opak:

        <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Coda|Open+Sans:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="http://www.basic-slider.com/css/main.css">
        <script src="http://www.basic-slider.com/js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
    </head>
    <body>
                <div class="span12" id="slider">
                    <ul class="bjqs">
                      <li><img src="http://www.basic-slider.com/img/banner01.jpg" title="Automatically generated caption"></li>
                      <li><img src="http://www.basic-slider.com/img/banner02.jpg" title="Automatically generated caption"></li>
                      <li><img src="http://www.basic-slider.com/img/banner03.jpg" title="Automatically generated caption"></li>
                    </ul>
                </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


        <script src="http://www.basic-slider.com/js/bjqs-1.3.min.js"></script>
        <script src="http://www.basic-slider.com/js/main.js"></script>

Wklej do notatnika, odpal jako .html. Robię tak "na opak", ponieważ osobiście nienawidzę sytuacji, gdy muszę coś z .js zrobić. Wtedy zawsze biorę całe źródło strony i kasuję co nie potrzebne, aż w końcu zostaje to co jest niezbędne do działania. Tak metodą prób i błędów dostaję co chcę.

Edytowane 25 Października 2013 przez teez

**lamusq** · 25 Października 2013

Niestety również nie działa, biała strona.

**PawelS** · 25 Października 2013

Do ipb_styles.css na samym dole dodaj:

/* Basic jQuery Slider essential styles */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

#banner-fade,
#banner-slide{
    margin-bottom: 60px;
}

ul.bjqs-controls.v-centered li a{
    display:block;
    padding:10px;
    background:#fff;
    color:#000;
    text-decoration: none;
}

ul.bjqs-controls.v-centered li a:hover{
    background:#000;
    color:#fff;
}

ol.bjqs-markers li a{
    padding:5px 10px;
    background:#000;
    color:#fff;
    margin:5px;
    text-decoration: none;
}

ol.bjqs-markers li.active-marker a,
ol.bjqs-markers li a:hover{
    background: #999;
}

p.bjqs-caption{
    background: rgba(255,255,255,0.5);
}

w globalTemlate daj tam gdzie chcesz:

      <div id="banner-fade">

        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li><img src="img/banner01.jpg" title="Automatically generated caption"></li>
          <li><img src="img/banner02.jpg" title="Automatically generated caption"></li>
          <li><img src="img/banner03.jpg" title="Automatically generated caption"></li>
        </ul>
        <!-- end Basic jQuery Slider -->

      </div>

w includeJS na samym dole dodaj:

<script src="{$this->settings['js_base_url']}js/bjqs-1.3.min.js"></script>
<script src="{$this->settings['js_base_url']}js/libs/jquery.secret-source.min.js"></script>

to wgraj na ftp

public.zip

wgraj grafiki jakie chcesz do folderu public/style_images/Twoj_styl/

wtedy zamień w globalTemplate:

          <li><img src="img/banner01.jpg" title="Automatically generated caption"></li>
          <li><img src="img/banner02.jpg" title="Automatically generated caption"></li>
          <li><img src="img/banner03.jpg" title="Automatically generated caption"></li>

na:

          <li><img src="{style_images_url}/PLIK1.jpg" title="Automatically generated caption"></li>
          <li><img src="{style_images_url}/PLIK2.jpg" title="Automatically generated caption"></li>
          <li><img src="{style_images_url}/PLIK3.jpg" title="Automatically generated caption"></li>

Pisane na oko, ale na 99% musi działać, jeżeli nie to sprawdze na sobie.

Edytowane 25 Października 2013 przez PawelS

**lamusq** · 25 Października 2013

**PawelS** · 25 Października 2013

Z tego wszystkiego "na biegu" zapomniałem dodać abyć dodał jeszcze to w includeJS:

      <script class="secret-source">
        jQuery(document).ready(function($) {

          $('#banner-fade').bjqs({
            height      : 320,
            width       : 620,
            responsive  : true
          });

        });
      </script>

I działa 100%

Edit.

Sprawdziłem właśnie i okazało się, że dobrze to zrobiłem bez testów Working well

Edytowane 25 Października 2013 przez PawelS

**lamusq** · 25 Października 2013

globalTemplate

			<!-- ::: MAIN CONTENT AREA ::: -->
    <div id="banner-fade">

        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li><img src="img/jedynka.jpg" title="Automatically generated caption"></li>
          <li><img src="img/dwojka.jpg" title="Automatically generated caption"></li>
        </ul>
        <!-- end Basic jQuery Slider -->

      </div>

includeJS

<script src="{$this->settings['js_base_url']}js/bjqs-1.3.min.js"></script>
<script src="{$this->settings['js_base_url']}js/libs/jquery.secret-source.min.js"></script>
      <script class="secret-source">
        jQuery(document).ready(function($) {
 
          $('#banner-fade').bjqs({
            height      : 320,
            width       : 620,
            responsive  : true
          });
 
        });
      </script>
<if test="minifyjs:|:$this->settings['use_minify']">
<if test="remoteloadjs:|:$this->settings['remote_load_js']">
<script type='text/javascript' src='<if test="usehttpsprototype:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js'></script>
<script type='text/javascript' src='<if test="usehttpsscriptaculous:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js?load=effects,dragdrop,builder'></script>
<else />
<script type='text/javascript' src='{$this->settings['js_base_url']}min/index.php?ipbv={$this->registry->output->antiCacheHash}&g=js'></script>
</if>
<script type='text/javascript' src='{$this->settings['js_base_url']}min/index.php?ipbv={$this->registry->output->antiCacheHash}&charset={$this->settings['gb_char_set']}&f={parse expression="PUBLIC_DIRECTORY"}/js/ipb.js,cache/lang_cache/{$this->lang->lang_id}/ipb.lang.js,{parse expression="PUBLIC_DIRECTORY"}/js/ips.hovercard.js,{parse expression="PUBLIC_DIRECTORY"}/js/ips.quickpm.js<if test="hasjsmodules:|:count($jsModules)">,{parse expression="PUBLIC_DIRECTORY"}/js/ips.{parse expression="implode('.js,' . PUBLIC_DIRECTORY . '/js/ips.', array_unique( array_keys( $jsModules ) ) )"}.js</if>' charset='{$this->settings['gb_char_set']}'></script>
<else />
<if test="nominifyremoteloadjs:|:$this->settings['remote_load_js']">
<script type='text/javascript' src='<if test="nmusehttpsp:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js'></script>
<else />
<script type='text/javascript' src='{$this->settings['js_base_url']}js/3rd_party/prototype.js'></script>
</if>
<script type='text/javascript' src='{$this->settings['js_base_url']}js/ipb.js?ipbv={$this->registry->output->antiCacheHash}&load=quickpm,hovercard,{parse expression="implode(',', array_unique( array_keys( $jsModules ) ) )"}'></script>
<if test="nominifyremoteloadjs2:|:$this->settings['remote_load_js']">
<script type='text/javascript' src='<if test="nmusehttpss:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js?load=effects,dragdrop,builder'></script>
<else />
<script type='text/javascript' src='{$this->settings['js_base_url']}js/3rd_party/scriptaculous/scriptaculous-cache.js'></script>
</if>
<script type="text/javascript" src='{$this->settings['cache_dir']}lang_cache/{$this->lang->lang_id}/ipb.lang.js?nck={$this->settings['noCacheKey']}' charset='{$this->settings['gb_char_set']}'></script>
</if>
{parse template="liveEditJs" group="global"}
<if test="isLargeTouch:|:$this->registry->output->isLargeTouchDevice()">
<script type="text/javascript" src='{$this->settings['js_base_url']}js/3rd_party/iscroll/iscroll.js'></script>
</if>

I nadal nie działa.

Edytowane 25 Października 2013 przez lamusq

**PawelS** · 25 Października 2013

Działa, tylko jeżeli dostajesz instrukcje na tacy i nie potrafisz wg niej nic zrobić to już nie moja wina.

Korzystałem z opisu wyżej:

Skąd to wziąłeś?

          <li><img src="img/jedynka.jpg" title="Automatically generated caption"></li>
          <li><img src="img/dwojka.jpg" title="Automatically generated caption"></li>

Nie pisałem nic takiego, więc nie dziwie się, że Tobie to nie działa, jak nawet ja bym tych grafik nie potrafił znaleźć z takiego linku.

Edytowane 25 Października 2013 przez PawelS

**lamusq** · 25 Października 2013

Kod mam dobrze? Wszystko zrobiłem jak napisałeś i kicha...

Edytowane 25 Października 2013 przez lamusq

**PawelS** · 25 Października 2013

Źle? Jeszcze się będziesz kłócił? Wykazać Ci Twoje błędy?

Proszę:

Po pierwsze pisałem aby dodać kod na końcu w includeJS, a nie na początku, ale wolisz robić po swojemu.

Po drugie pisałem abyś zamienił kod na:

          <li><img src="{style_images_url}/PLIK1.jpg" title="Automatically generated caption"></li>
          <li><img src="{style_images_url}/PLIK2.jpg" title="Automatically generated caption"></li>
          <li><img src="{style_images_url}/PLIK3.jpg" title="Automatically generated caption"></li>

gdzie jest {style_images_url} kierujący do folderu z twoim skinem, ale tego też nie zrobiłeś, to jak to ma działać?

Edytowane 25 Października 2013 przez PawelS

**lamusq** · 25 Października 2013

<if test="minifyjs:|:$this->settings['use_minify']">
<if test="remoteloadjs:|:$this->settings['remote_load_js']">
<script type='text/javascript' src='<if test="usehttpsprototype:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js'></script>
<script type='text/javascript' src='<if test="usehttpsscriptaculous:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js?load=effects,dragdrop,builder'></script>
<else />
<script type='text/javascript' src='{$this->settings['js_base_url']}min/index.php?ipbv={$this->registry->output->antiCacheHash}&g=js'></script>
</if>
<script type='text/javascript' src='{$this->settings['js_base_url']}min/index.php?ipbv={$this->registry->output->antiCacheHash}&charset={$this->settings['gb_char_set']}&f={parse expression="PUBLIC_DIRECTORY"}/js/ipb.js,cache/lang_cache/{$this->lang->lang_id}/ipb.lang.js,{parse expression="PUBLIC_DIRECTORY"}/js/ips.hovercard.js,{parse expression="PUBLIC_DIRECTORY"}/js/ips.quickpm.js<if test="hasjsmodules:|:count($jsModules)">,{parse expression="PUBLIC_DIRECTORY"}/js/ips.{parse expression="implode('.js,' . PUBLIC_DIRECTORY . '/js/ips.', array_unique( array_keys( $jsModules ) ) )"}.js</if>' charset='{$this->settings['gb_char_set']}'></script>
<else />
<if test="nominifyremoteloadjs:|:$this->settings['remote_load_js']">
<script type='text/javascript' src='<if test="nmusehttpsp:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js'></script>
<else />
<script type='text/javascript' src='{$this->settings['js_base_url']}js/3rd_party/prototype.js'></script>
</if>
<script type='text/javascript' src='{$this->settings['js_base_url']}js/ipb.js?ipbv={$this->registry->output->antiCacheHash}&load=quickpm,hovercard,{parse expression="implode(',', array_unique( array_keys( $jsModules ) ) )"}'></script>
<if test="nominifyremoteloadjs2:|:$this->settings['remote_load_js']">
<script type='text/javascript' src='<if test="nmusehttpss:|:$this->registry->output->isHTTPS">https<else />http</if>://ajax.googleapis.com/ajax/libs/scriptaculous/1.8/scriptaculous.js?load=effects,dragdrop,builder'></script>
<else />
<script type='text/javascript' src='{$this->settings['js_base_url']}js/3rd_party/scriptaculous/scriptaculous-cache.js'></script>
</if>
<script type="text/javascript" src='{$this->settings['cache_dir']}lang_cache/{$this->lang->lang_id}/ipb.lang.js?nck={$this->settings['noCacheKey']}' charset='{$this->settings['gb_char_set']}'></script>
</if>
{parse template="liveEditJs" group="global"}
<if test="isLargeTouch:|:$this->registry->output->isLargeTouchDevice()">
<script type="text/javascript" src='{$this->settings['js_base_url']}js/3rd_party/iscroll/iscroll.js'></script>
</if>
<script src="{$this->settings['js_base_url']}js/bjqs-1.3.min.js"></script>
<script src="{$this->settings['js_base_url']}js/libs/jquery.secret-source.min.js"></script>
      <script class="secret-source">
        jQuery(document).ready(function($) {
 
          $('#banner-fade').bjqs({
            height      : 320,
            width       : 620,
            responsive  : true
          });
 
        });
      </script>

<!-- ::: MAIN CONTENT AREA ::: -->
      <div id="banner-fade">
 
        <!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li><img src="{style_images_url}/banner01.jpg" title="Automatically generated caption"></li>
          <li><img src="{style_images_url}/banner02.jpg" title="Automatically generated caption"></li>
          <li><img src="{style_images_url}/banner03.jpg" title="Automatically generated caption"></li>
        </ul>
        <!-- end Basic jQuery Slider -->
 
      </div>
<div id='content' class='clearfix'>

Poprawiłem i nadal nic, to samo. Gdzieś jeszcze jakiś błąd?

Edytowane 25 Października 2013 przez lamusq

**PawelS** · 25 Października 2013

banner01.png czy taki plik jest na FTP? o takiej nazwie w folderze stylu?

**lamusq** · 25 Października 2013

Tak, wszystkie 3 sa w ftp.

**PawelS** · 25 Października 2013

No to nie wiem co źle robisz. Przeanalizuj mój post dokładnie, ja zrobiłem według niego i wszystko mi dobrze działa, więc Tobie też powinno.

**lamusq** · 25 Października 2013

Cholera. Próbowałem już kilka razy, cały czas od nowa i nadal kicha.

**PawelS** · 25 Października 2013

Adres do forum?

**lamusq** · 26 Października 2013

Próbuje to zrobić na localhoście, później będzie forum.

**PawelS** · 30 Października 2013

Po raz drugi korzystałem z opisu wyżej robiąc to na jednym forum i działa jak ta lala. Coś źle robisz, innej opcji nie ma

(albo piszę po chińsku i tylko ja to potrafię zrozumieć )

Edytowane 30 Października 2013 przez PawelS

5 Listopada 2013

Dementuję, próbowałem zrobić to sam i za pomocą Twojego kodu, nadal nie działa.

Wyświetlają się tylko przyciski, brak obrazków. Zero reakcji.

**PawelS** · 8 Listopada 2013

To dziwne, że mi działa na czystym IPB według instrukcji wyżej, a Wam nie.

Zaloguj się

Pomoc przy sliderze jquery

Rekomendowane odpowiedzi

lamusq

teez

PawelS

Macsch15

lamusq

PawelS

teez

lamusq

PawelS

lamusq

PawelS

lamusq

PawelS

lamusq

PawelS

lamusq

PawelS

lamusq

PawelS

lamusq

PawelS

lamusq

PawelS

Gość ratosluaf

PawelS

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników

Pliki

Cała aktywność

Przeglądaj

Powiadomienie o plikach cookie