X
  • #1 10 Jan 2010 12:21
    malum
    Level 23  
    Helpful post? (0)
    Witam!
    Podczas tworzenia strony internetowej natrafiłem na problem.
    Założenie jest takie, aby po otwarciu strony, znajdujące się na niej zdjęcia zmieniały się automatycznie co 3 sekundy.
    Znalazłem taki skrypt:

    Code:

    <html>
    <head>
    <script type="text/javascript">
       var imgs = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
       var pos  = 0;

       function chImg()
       {
          var i = document.getElementById( 'imgField' );

          i.src = '../fotki/kat3/' + imgs[ pos++ ];

          if( pos >= 5 )
          {
             pos = 0;
          }

          window.setTimeout( 'chImg()', 3000 );
       }
    </script>
    </head>
    <body onload="chImg();">
    <img src="../fotki/kat3/1.jpg" id="imgField"/>
    </body>
    </html>]


    Działa bardzo dobrze, ale pozwala na wyświetlenie tylko jednego zdjęcia. Gdyby na stronie było ich 20 musiałbym 20 razy wklepywać ten sam skrypt z drobnymi zmianami, co w moim przypadku jest niepraktyczne, bo ilość zdjęć na stronie będzie zmieniała się praktycznie przy każdym odświeżeniu strony.

    Próbowałem też zastosować program napisany w PHP połączony z autoodświeżaniem strony, ale przez to odświeżanie sypie mi się reszta strony.

    Macie może jakiś lepszy skrypt?

    No i drugie pytanie. Powyższy skrypt korzysta z nazw plików zapisanych do tablicy.
    Jak stworzyć taką tablicę automatycznie bo w PHP robi się to tak:
    Code:

    <?
    $folder = opendir('../fotki/kat3');
    $i = 0;
    while(false !=($plik = readdir($folder))){
    if($plik != "." && $plik != ".."){
       $obrazki[$i]= $plik;
       $i++;
       }
    }
    closedir($folder);

    $losowy=rand(0,count($obrazki)-1);

    echo($losowy);
    echo('<img src=../fotki/kat3/'.$obrazki[$losowy].'>');
    ?>

    Powyższy programik również pozwala na automatyczną zmianę zdjęć, ale przy każdym odświeżeniu strony. Tu problemem jest znowu to odświeżanie - zdjęcia mają zmieniać się automatycznie.
  • #2 11 Jan 2010 04:08
    DriverMSG
    Admin grupy komputery
    Helpful post? (0)
    Nie znam się na robieniu stron www,, ale ostatnio pomagałem bratu w tworzeniu galerii, może przyda ci się to, co mi się zachowało - można tam regulować czas wyświetlania każdej fotki osobno.
  • #3 11 Jan 2010 18:32
    malum
    Level 23  
    Topic author Helpful post? (0)
    DriverMSG wrote:
    Nie znam się na robieniu stron www,, ale ostatnio pomagałem bratu w tworzeniu galerii, może przyda ci się to, co mi się zachowało - można tam regulować czas wyświetlania każdej fotki osobno.


    Dzięki wielkie za zainteresowanie, ale nie o to m chodzi.
    Mam kika różnych skryptów realizujących zadanie automatycznego przechodzenia ze zdjęcia w zdjęcie, ale ani jeden nie daje się zastosować na jednej stronie dla kilku grup różnych zdjęć :-(

    Ma ktoś jakiś pomysł na realizację tego zadania?
  • #4 12 Jan 2010 11:21
    arnoldziq
    Moderator Programowanie
    Helpful post? (0)
    Czemu nie coś takiego ?
    Code:
    <html>
    
    <head>
    <script type="text/javascript">
       var imgs   = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
       var imgs2 = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
       var pos  = 0;

       function chImg()
       {
          var i = document.getElementById( 'imgField' );
          var i2 = document.getElementById( 'imgField2' );
          i.src = '../fotki/kat3/' + imgs[ pos++ ];
          i2.src = '../fotki/kat4/' + imgs2[ pos++ ];

          if( pos >= 5 )
          {
             pos = 0;
          }

          window.setTimeout( 'chImg()', 3000 );
       }
    </script>
    </head>
    <body onload="chImg();">
    <img src="../fotki/kat3/1.jpg" id="imgField"/>
    <br>
    <img src="../fotki/kat4/1.jpg" id="imgField2"/>
    </body>
    </html>]
  • #5 19 Feb 2010 09:08
    BRASS
    Level 15  
    Helpful post? (0)
    Zamiast setTimeout daj setInterval. setTimeout wywołuje sie tylko raz. setInterval działa stale aż do momentu kiedy nie dasz CrearInterval(wartosc_ zwrócona_przez setInternal)
  • #6 05 Aug 2010 14:15
    BooM-Bel
    Level 1  
    Helpful post? (0)
    Wypróbowałem obie funkcje: "setInterval" i "setTimeout". "setTimeout" działa idealnie i obrazki zmieniają się cały czas bez względu na to jak długo otwarta jest strona. Niestety "setInterval" po kilku pętlach zaczyna zmieniać obrazki tak szybko że migają jak strobo na imprezie techno. W tym skrypcie lepszym rozwiązaniem jest "setTimeout".
  • #7 15 Jan 2012 23:37
    FoczkaMK
    Level 7  
    Helpful post? (0)
    Witam,
    Próbowałam wykorzystać zaprezentowany wyżej przez arnoldziq skrypt ale niestety bez powodzenia.
    Dla jednego zdjęcia (miejsca wyświetlania) działa ok.
    Dla dwóch wyświetla co drugi obrazek:
    dla zdjęcia1 - fotki 1,3,5
    dla zdjęcia2 - fotki 2,4,puste miejce
    Dla trzech wyświetla się co trzeci:
    dla zdjęcia1 - fotki 1,4
    dla zdjęcia2 - fotki 2,5
    dla zdjęcia3 - fotki 3, puste miejce
    Kombinowałam przez kilka godzin począwszy od zmian nazw plików jpg (pierwotnie były nazwy alfanumeryczne) i ich położenia w katalogach (pierwotnie w jednym) ale nie umiem znaleźć przyczyny. Docelowo chciałam ustawić 4 zdjęcia po 3 lub 5 zmian każde.

    Kod dla 3 zdjęć:
    Code:
    <head>
    
    <script type="text/javascript">
       var imgs = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
       var imgs2 = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
       var imgs3 = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
       var pos  = 0;

       function chImg()
       {
          var i = document.getElementById( 'imgField' );
          var i2 = document.getElementById( 'imgField2' );
          var i3 = document.getElementById( 'imgField3' );
          i.src = 'images/my/my1/' + imgs[ pos++ ];
          i2.src = 'images/my/my2/' + imgs2[ pos++ ];
          i3.src = 'images/my/my3/' + imgs3[ pos++ ];

          if( pos >= 5 )
          {
             pos = 0;
          }

          window.setTimeout( 'chImg()', 3000 );
       }
    </script>
    </head>

    <body topmargin="0" leftmargin="0" bgcolor="#99CCFF" onload="chImg();">

    <img src="images/my/my1/1.jpg" id="imgField"/>
    <img src="images/my/my2/1.jpg" id="imgField2"/>
    <img src="images/my/my3/1.jpg" id="imgField3"/>

    Poniżej podkreślone pliki, które sie wyświetlają, pozostałe nawet nie próbują mogę sobie wpisać nazwę nieistniejącego pliku i nie ma to żadnego wpływu na wykonywanie skryptu:
    ('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
    ('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
    ('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'); nic


    działanie skryptu podejrzeć można po adresami:
    1 zdjęcie: www.kulesza.net.pl/top1.htm
    2 dzjecia: www.kulesza.net.pl/top2.htm
    3 zdjęcia: www.kulesza.net.pl/top3.htm

    Może ktoś podpowie co jest nie tak.
  • #8 16 Jan 2012 12:03
    arnoldziq
    Moderator Programowanie
    Helpful post? (0)
    Sprawa jest dość prosta i chodzi o tzw. czeski błąd :)
    Oryginalny skrypt, był przewidziany do zmiany tylko jednego obrazka, i jako taki działa bez problemów :)
    Zauważ, że pozycja w tabeli pos jest zwiększana w trakcie wywołania.
    Przy pierwszej pętli, pierwszy element jest zwiększany z 0 do 1 (pos++), ale chwilę potem ten sam element jest zwiększany z 1 do 2 itd.
    Przy 3 obrazkach, przy drugiej pętli, która powinna wywołać drugi obrazek z tabeli, pierwsza tabela wskazuje na 4, druga na 5 a trzecia ... na 6. Stąd brak wyświetlania...
    Żeby to naprawić, zmodyfilowałem skrypt w ten sposób :
    Code: javascript
    Log in, to see the code


    A wynik działania, możesz zobaczyć tutaj : Link
  • #9 16 Jan 2012 17:54
    FoczkaMK
    Level 7  
    Helpful post? (0)
    Wielkie dzięki.
    Widzę, że za szybko się poddałam, bo chodziła mi po głowie zmiana 'pos' ale nie wiedziałam jak to ugryźć.
    Jeszcze raz dziękuję.
  • #10 25 Jan 2012 16:39
    sebaq1
    Level 1  
    Helpful post? (0)
    Jest jakiś kod w HTML - u było by mi łatwiej go edytować???
  • #11 25 Jan 2012 17:50
    arnoldziq
    Moderator Programowanie
    Helpful post? (0)
    sebaq1 wrote:
    Jest jakiś kod w HTML - u było by mi łatwiej go edytować???

    Dwa posty wyżej masz link do strony. Pobierz HTML i możesz sobie edytować do woli.
  • #12 21 Feb 2012 14:41
    muli9
    Level 9  
    Helpful post? (0)
    Witam

    Wkleiłem kod na stronie ale nie działa żaden z powyższych, wogóle nic się nie wyświetla w miejscu, w którym wstawiłem - co jest nie tak ?
    W zasadzie to mnie interesuje zmiana tylko 2 obrazków, w jednym miejscu.
  • #13 21 Feb 2012 14:45
    arnoldziq
    Moderator Programowanie
    Helpful post? (0)
    muli9 wrote:
    Witam

    Wkleiłem kod na stronie ale nie działa żaden z powyższych, wogóle nic się nie wyświetla w miejscu, w którym wstawiłem - co jest nie tak ?
    W zasadzie to mnie interesuje zmiana tylko 2 obrazków, w jednym miejscu.

    Masz gdzieś tę stronę umieszczoną ? Można to gdzieś zobaczyć ?
    Jak nie, to zamieść tu kod, wraz z Twoimi obrazkami, które maja się zmieniać.
  • #14 21 Feb 2012 15:05
    muli9
    Level 9  
    Helpful post? (0)
    Narazie testuję na serwerze wirtualnym wamp - strona jest jako php. Gdziekolwiek bym nie wrzucil tego kodu nic sie nie dzieje i nic nie wyskakuje. Zdjęcia mam w folderze images, nazwy fotek to img2.jpg i img2a.jpg. A kod przerzuciłem dokładnie w tej postaci co jest powyżej i zamieniłem foto1.jpg na img2.jpg itp oraz katalog 'images/my1/' na 'images/'
  • #15 21 Feb 2012 15:19
    arnoldziq
    Moderator Programowanie
    Helpful post? (0)
    Twój opis niczego nie zmienia, wystarczy, że zmieniłeś gdzieś jedną literę i skrypt się nie wykona.
    Dlatego bez kodów źródłowych, nie ruszymy z miejsca. :/
  • #16 21 Feb 2012 16:44
    muli9
    Level 9  
    Helpful post? (0)
    Cos takiego mam



    Code: php
    Log in, to see the code




    Co ciekawe dziś znalazłem coś takiego i już się coś pokazuje ale nie jest to obrazek tylko jakby go nie wczytało:


    Code: php
    Log in, to see the code


    Proszę pamiętać o używaniu znaczników syntax. Opcja Listing kodu. - arnoldziq
  • #17 21 Feb 2012 16:55
    arnoldziq
    Moderator Programowanie
    Helpful post? (0)
    Górny (mój) skrypt się nie wykona, bo nie ma gdzie wyświetlać obrazków...
    Skrypt oswołuje się do konkretnych miejść na stronie, oznaczonych imgField1, imgField2 itd.
    U Ciebie ich po prostu nie ma.
    Nie wystarczy sobie "wkleić" czegoś do swojego kodu, żeby od razu zadziałało...
  • #18 21 Feb 2012 17:11
    muli9
    Level 9  
    Helpful post? (0)
    Oczywiście masz racje - głupota z mojej strony - teraz już coś ruszyło - widać jeden obrazek tylko się nie zmienia ;)
  • #19 21 Feb 2012 17:16
    arnoldziq
    Moderator Programowanie
    Helpful post? (0)
    Drugi skrypt można uruchomić w ten sposób :
    Code: html4strict
    Log in, to see the code
  • #20 21 Feb 2012 17:34
    muli9
    Level 9  
    Helpful post? (0)
    Niestety w żadnym z kodów nie chce się zmieniać - jest tylko statyczny obraz

    a co powinno być po src może tu jest problem <img src="" id="pic1" /> ?

    Dodano po 8 [minuty]:

    ok ruszyło dzięki wielkie ;)
  • #21 21 Feb 2012 17:35
    arnoldziq
    Moderator Programowanie
    Helpful post? (0)
    muli9 wrote:
    Niestety w żadnym z kodów nie chce się zmieniać - jest tylko statyczny obraz

    Cos przechwytuje twój timer.
    muli9 wrote:
    a co powinno być po src może tu jest problem <img src="" id="pic1" /> ?

    Tam może być cokolwiek, to po prostu miejsce, w którym będą wymieniane linki do obrazków. Możesz jako "scr" podać link do istniejącego obrazka i od tego obrazka wszystko będzie "startować".
  • #22 21 Feb 2012 17:42
    muli9
    Level 9  
    Helpful post? (0)
    Już super śmiga - miałem w body <body onload="chImg();"> z poprzedniego skryptu i to zakłócało nowy skrypt - jeszcze raz dzięki.
  • #23 15 Oct 2013 11:13
    adziozone2
    Level 8  
    Helpful post? (0)
    arnoldziq wrote:
    Drugi skrypt można uruchomić w ten sposób :
    Code: html4strict
    Log in, to see the code


    Hej,

    Wszystko jest tak jak trzeba, tylko jak ktoś chcę umieścić kod w osobnym pliku np. [i]"nz.js" a zostawić na stronce tylko "<img scr="" id="pic1"/>" to raczej chyba ze się myle powinno być inaczej. A sam nie wiem, co to ma być, wiem ze na stronce na się znajdować:

    <script typy="text/javascript" src="zm.js"></script>

    <img scr="" id="pic1" />


    ale to nie działa, i dlatego pytam was.
  • #24 15 Oct 2013 11:28
    arnoldziq
    Moderator Programowanie
    Helpful post? (0)
    Może chodzi o użycie nieznanego (z poziomu HTML/javaScript) słowa typy, zamiast type ?
  • #25 15 Oct 2013 11:29
    Mr_Unk
    Level 16  
    Helpful post? (0)
    Tylko po co tak rzeźbić - nie możesz po prostu użyć dowolnego slidera ?

    Choćby tego

    Po co pisać coś, co ktoś inny napisał już dawno temu... lepiej.
  • #26 15 Oct 2013 12:31
    adziozone2
    Level 8  
    Helpful post? (0)
    ok, wszystko jasne,
  Search 4 million + Products
Browse Products