Forum Debian Users Gang

pink · 2012-12-29 11:14:48

http://bxslider.com/

chce zastosowac taki slider na stronie html

ale nie rozumiem punktu 3
Step 3: Call the bxSlider

tu jest wszystko opisane ale nie umiem tego poprawnie uruchomic
http://www.learningjquery.com/2006/09/introducing-document-ready

tu jest html strony:

Kod:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title> Demo | Responsive Web</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
        <link href="styles/main.css" type="text/css" rel="stylesheet">
        <!--BXSLIDER engine>
        <!-- jQuery library (served from Google) -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <!-- bxSlider Javascript file -->
        <script src="bxslider/js/jquery.bxslider.min.js"></script>
        <!-- bxSlider CSS file -->
        <link href="bxslider/jquery.bxslider.css" rel="stylesheet" />
        <!--BXSLIDER engine-->
        <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type='text/javascript' src='scripts/respond.min.js'></script>
    </head>
    <body>
        
        <div id="wrapper">
        
            <header>
                
                <nav id="skipTo">
                    <ul>
                        <li>
                            <a href="#main" title="Skip to Main Content">Skip to Main Content</a>
                        </li>
                    </ul>
                </nav>
                
                <h1>Demo</h1>
                
                <nav>
                    <ul>
                        <li><a href="index.html" title="Home">Home</a></li>
                        <li><a href="shop.html" title="Shop">Shop</a></li>
                        <li><a href="about.html" title="About Me">About Me</a></li>
                        <li><a href="contact.html" title="Contact">Contact</a></li>
                    </ul>
                </nav>
                
                <div id="banner">
                <!--BXSLIDER content-->
                <ul class="bxslider">
                  <li><img src="bxslider/images/pic1.jpg" /></li>
              <li><img src="bxslider/images/pic2.jpg" /></li>
              <li><img src="bxslider/images/pic3.jpg" /></li>
                  <li><img src="bxslider/images/pic4.jpg" /></li>
                </ul>
                <!--BXSLIDER content-->
                    <!--img src="images/kaws.jpg" alt="banner" /-->
                </div>
                
            </header>    
        
            <section id="main">
                <h1>Main section</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>
        
            <aside>
                <h1>Sub-section</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </aside>
    
        </div>

    </body>
</html>

Ostatnio edytowany przez pink (2012-12-29 11:53:00)

kamikaze · 2012-12-29 12:21:12

W pkt 3. masz kod js, który masz wkleić do kodu strony i tyle. Kod będzie uruchamiał bxslider przy ładowaniu strony.

pink · 2012-12-29 12:27:35

Kod:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title> Demo | Responsive Web</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
        <link href="styles/main.css" type="text/css" rel="stylesheet">
        <!--BXSLIDER engine>
        <!-- jQuery library (served from Google) -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <!-- bxSlider Javascript file -->
        <script type='text/javascript' src='scripts/respond.min.js'></script>
        <script src="bxslider/js/jquery.bxslider.min.js"></script>
        <!-- bxSlider CSS file -->
        <link href="bxslider/jquery.bxslider.css" rel="stylesheet" />
        <!--BXSLIDER engine-->
        <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
   <script type="text/javascript" >
   $(document).ready(function(){
   $('.bxslider').bxSlider();
   });
   </script>    
    </head>

ze tak, mam rozumiec???

kamikaze · 2012-12-29 13:05:41

No jakoś tak się js w html osadza ;] Działa?

pink · 2012-12-29 13:32:10

dziala, tylko jeszcze pare innych zeczy bylo trzeba pozmieniac, tak to jest jak sie bezmyslnie kopiuje i wkleja.

zalezalo mi na tej bo jest responsywna i prosta.

Dzieki.

Ostatnio edytowany przez pink (2012-12-29 13:32:45)

pink · 2012-12-29 15:19:30

a moze mi ktos jeszcze podlinkowac cos na temat cms,
jakies podstawy (od czego by mozna zaczac),

tylko nie odsylajcie mnie do google potrzebuje cos sprawdzonego.

yossarian · 2012-12-29 16:15:30

pink napisał(-a):
tylko nie odsylajcie mnie do google potrzebuje cos sprawdzonego.

google to sprawdzone źródło ;)

Minio · 2012-12-29 16:55:02

pink napisał(-a):
a moze mi ktos jeszcze podlinkowac cos na temat cms,
jakies podstawy (od czego by mozna zaczac),

Tylko wiesz… Twoje pytanie na razie brzmi jak „może ktoś podlinkować coś na temat samochodów?”.

CMS, czyli Content Management System (System zarządzania treścią), to po prostu nazwa pewnej klasy aplikacji. Współcześnie CMS-y kojarzy się głównie z narzędziami do publikowania treści w Internecie, ale do tej samej kategorii należą różne rozwiązania używane wewnątrz korporacji. Tak więc CMS-y różnią się wielkością, możliwościami i sektorem, na który są dedykowane.

Przypuszczam, że nie interesuje Cię pisanie własnego CMS-a, a raczej użytkowanie. W takim wypadku poczytaj sobie o Wordpressie, Drupalu, Joomli. To są chyba najpopularniejsze.

Niemniej dopóki nie doprecyzujesz swojego pytania, raczej nikt nie będzie w stanie Ci sensownie pomóc.

pink · 2012-12-30 07:16:13

precyzyjnie to jak taki cms zaimplementowac na prostej stronie, tak aby przyszly wlasciciel strony mogl w prosty sposob ingerowac w tresc na stronie (glownie chodzi mi o dodawanie grafik, textu)

Minio · 2012-12-30 10:57:44

Jeżeli chodzi tylko o treść, to możesz iść w stronę CMS-ów bez SQL, np. GetSimple, Stacey, Symphony. czy Cushy. Więcej w pierwszym lepszym linku z Google.

Jeżeli chcesz przyszłemu właścicielowi umożliwić także zmianę wyglądu itp., to Wordpress albo Drupal.

pink · 2012-12-30 12:39:11

.....wlasnie nie chce umozliwiac zmiany wygladu,
obadam dzieki.

Forum Debian Users Gang

Ogłoszenie

#1 2012-12-29 11:14:48

pink - Użytkownik

bxslider

Kod:

#2 2012-12-29 12:21:12

kamikaze - Administrator

Re: bxslider

#3 2012-12-29 12:27:35

pink - Użytkownik

Re: bxslider

Kod:

#4 2012-12-29 13:05:41

kamikaze - Administrator

Re: bxslider

#5 2012-12-29 13:32:10

pink - Użytkownik

Re: bxslider

#6 2012-12-29 15:19:30

pink - Użytkownik

Re: bxslider

#7 2012-12-29 16:15:30

yossarian - Szczawiożerca

Re: bxslider

pink napisał(-a):

#8 2012-12-29 16:55:02

Minio - Użyszkodnik

Re: bxslider

pink napisał(-a):

#9 2012-12-30 07:16:13

pink - Użytkownik

Re: bxslider

#10 2012-12-30 10:57:44

Minio - Użyszkodnik

Re: bxslider

#11 2012-12-30 12:39:11

pink - Użytkownik

Re: bxslider

Stopka forum