Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Rotator, slider

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Rotator, slider

Post 24.02.2017, 18:15:22

Witam wszystkich,

Mam dwa pytania, bo ja zielony jestem :)
1. Na stronie chcę wyświetlić rotator, w miarę prosty do edycji.
Znalazłem juz przykład który by mi pasował:
Kod: Zaznacz cały
<script>
rotator = new Array(4);
rotator[0] = '<a href="a.html" target=_blank><img src="a.jpg" width="330" HEIGHT="330" BORDER="0" alt="rotator1"></a>';
rotator[1] = '<a href="b.html" target=_blank><img src="b.jpg" width="330" HEIGHT="330" BORDER="0" alt="rotator2"></a>';
rotator[2] = '<a href="c.html" target=_blank><img src="c.jpg" width="330" height="330" BORDER="0" alt="rotator3"></a>';
rotator[3] = '<a href="d.html" target=_blank><img src="d.jpg" width="330" height="330" BORDER="0" alt="rotator4">></a>';

//losowe wyświetlenie
index = Math.floor(Math.random() * rotator.length);
//wyświetlanie rotatorów
document.write(rotator[index]);
</script>

Jednak musiałbym go zmodyfikować a nie wiem w jaki sposób.
Modyfikacja miała by polegać na tym aby obrazki pojawiały się według kolejności na liście, oraz żeby po zamknięciu strony i otwarciu jej ponownie pojawiał się nie pierwszy obrazek ale następny z listy. Gdy się lista skończy lista ma iść od nowa. Chodzi o to aby użytkownikowi po odświeżeniu strony, jak i jej ponownym otwarciu pojawiał się kolejny obrazek.

2. Na stronie chciałbym umieścić slider, również w dość prosty sposób do zarządzania obrazkami które mają się w nim znajdować (przykład z rotatora, gdzie praktycznie w jednej linijce mogę umieścić obrazek, link do strony, opis obrazka).
Czy ktoś się spotkał z takim kodem ?
bigthomas
Posty: 13
Dołączył(a): 02.12.2005

Re: Rotator, slider

Post 25.02.2017, 00:05:14

Ad.1. https://jsfiddle.net/tsu51Lqb/2/
Ad.2. nie rozumiem o co pytasz
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19531
Dołączył(a): 14.04.2002

Re: Rotator, slider

Post 25.02.2017, 01:23:53

kuku napisał(a):Ad.1. https://jsfiddle.net/tsu51Lqb/2/
Ad.2. nie rozumiem o co pytasz


Dzięki, co do ad1 to prawie o to chodziło, z tym że po zamknięciu strony i otwarciu ponownie dalej wyświetla się pierwszy obrazek, a chciałbym aby był kolejny z listy - tutaj pewnie trzeba zastosować cookies.

ad2. Chodzi mi o utworzenie slidera coś na styl tego : https://jsfiddle.net/Lyp1rqce/1/ ale coś łatwiejszego do edycji. W tym przypadku również fajnie aby było to w jednym pliku.
bigthomas
Posty: 13
Dołączył(a): 02.12.2005

Re: Rotator, slider

Post 25.02.2017, 01:36:00

Jak dla mnie skrypt działa. Moge sobie wyłączać stronę lub całą przeglądarkę i ponownym wejściu na stronę dostaję kolejny obrazek. Masz może właczony private mode w przeglądarce? Zapisuję informację o bieżącym obrazku w localStorage.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19531
Dołączył(a): 14.04.2002

Re: Rotator, slider

Post 25.02.2017, 02:04:24

kuku napisał(a):Jak dla mnie skrypt działa. Moge sobie wyłączać stronę lub całą przeglądarkę i ponownym wejściu na stronę dostaję kolejny obrazek. Masz może właczony private mode w przeglądarce? Zapisuję informację o bieżącym obrazku w localStorage.

OK, a jest możliwość aby kod był w jednym miejscu ?
bigthomas
Posty: 13
Dołączył(a): 02.12.2005

Re: Rotator, slider

Post 25.02.2017, 13:08:59

ok poradziłem sobie z łączeniem.
Kod: Zaznacz cały
<div id="rotator"></div>
<script type="text/x-template" id="rotatorTemplate">
   <a href="{{url}}" target="_blank"><img src="{{img}}" alt="{{alt}}"></a>
</script>
<script id="jsbin-javascript">
(function (data, storageKey, container, templateId) {
  function microTemplate (templateId, data) {
     var tpl = document.getElementById(templateId).innerHTML;
   
    return tpl.replace(/\{\{([a-zA-Z0-9_]+)\}\}/g, function (match, name) {
    console.log(name);
       return data[name] || '';
    });
  }
 
  var index = Number(localStorage.getItem(storageKey) || '-1');
  index++;
  index %= data.length;
  localStorage.setItem(storageKey, index);
  var current = data[index];
 
  container.innerHTML = microTemplate('rotatorTemplate', current);
}([
  { url: 'http://mozilla.org', img: 'http://lorempixel.com/150/150/nature/1', alt: 'Mozilla' },
  { url: 'http://webhelp.pl', img: 'http://lorempixel.com/150/150/nature/2', alt: 'Webhelp' },
  { url: 'http://forum.webhelp.pl', img: 'http://lorempixel.com/150/150/nature/3', alt: 'Forum Webhelp' }
], 'rotator', document.getElementById('rotator'), 'rotatorTemplate'));
</script>


Ale mam inny problem, napis z alt-a.
bigthomas
Posty: 13
Dołączył(a): 02.12.2005

Re: Rotator, slider

Post 25.02.2017, 16:31:43

Ale mam inny problem, napis z alt-a.

na czym polega ten problem?
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19531
Dołączył(a): 14.04.2002

Re: Rotator, slider

Post 04.04.2017, 14:16:08

Witaj,
A czy przykład z tego linku https://jsfiddle.net/tsu51Lqb/2/
Może być napisane inaczej, z tego co się domyślam jest to angular.
Niestety mój serwer tego nie przyjmuje.
bigthomas
Posty: 13
Dołączył(a): 02.12.2005

Re: Rotator, slider

Post 04.04.2017, 14:36:01

To nie jest angular, ten skrypt nie posiada żadnych zależności. Nie rozumiem co serwer ma do tego?
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19531
Dołączył(a): 14.04.2002

Re: Rotator, slider

Post 05.04.2017, 08:11:42

Sorry mój błąd ... niedoświadczony jestem.
Rzeczywiście to nie jest angular.

Ale problem mam dalej bo pod IE rotator nie działa.
FF i CHROME jest ok.
bigthomas
Posty: 13
Dołączył(a): 02.12.2005

Re: Rotator, slider

Post 05.04.2017, 09:49:44

Czy możesz podać inny przykład rozwiązania kodu rotatora, tak aby spełniał wszystkie wymagania.
bigthomas
Posty: 13
Dołączył(a): 02.12.2005

Re: Rotator, slider

Post 05.04.2017, 10:06:30

Na IE11 działa mi poprawnie. Na której wersji testujesz? Żebym wiedział co przerabiać, muszę wiedzieć w czym leży problem. I czy skrypt w obecnej postaci spełnia wszystkie wymagania, czy któregoś nie spełnia?
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19531
Dołączył(a): 14.04.2002

Re: Rotator, slider

Post 05.04.2017, 13:24:39

Problem rozwiązany :)
Zamieniłem ' na " i kod się uruchomił :)
Ostatnio edytowano 05.04.2017, 13:34:02 przez bigthomas, łącznie edytowano 1 raz
bigthomas
Posty: 13
Dołączył(a): 02.12.2005

Re: Rotator, slider

Post 05.04.2017, 13:31:50

W kodzie możesz bez problemu zamienić wszystkie ' na ". Co do {{ to po prostu zamień
Kod: Zaznacz cały
{{url}}
(i pozostałe w szablonie) na cokolwiek chcesz, np.
Kod: Zaznacz cały
%url%

i w linii
Kod: Zaznacz cały
return tpl.replace(/\{\{([a-zA-Z0-9_]+)\}\}/g, function (match, name) {

zmień
Kod: Zaznacz cały
\{\{

oraz
Kod: Zaznacz cały
\}\}

na nowy symbol
Kod: Zaznacz cały
\%
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19531
Dołączył(a): 14.04.2002

Re: Rotator, slider

Post 05.04.2017, 23:14:55

A łatwiejszym, bardziej przejrzystym rozwiązaniem nie było by dodać wszystkich obrazków do html i ustawić w css display:none, natomiast java script by tylko zmieniał jej wartość? :)
DrWhale
Posty: 7
Dołączył(a): 05.04.2017

Re: Rotator, slider

Post 05.04.2017, 23:36:33

Też tak można zrobić. Jest wiele sposobów na realizację zadania, każde ma swoje wady i zalety. Wadą Twojej propozycji jest, że przeglądarka wykona żądanie po obrazek (jeśli ten będzie wstawiony jako <img>), nawet jeśli obrazek ma display: none. Zatem jeśli rotator ma kilkanaście obrazków a na każde załadowanie strony pokazujemy tylko 1, to marnujemy tylko transfer, co ma znaczenie w przypadku urządzeń mobilnych.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19531
Dołączył(a): 14.04.2002


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Yahoo [Bot] i 7 gości

Hosting, Domeny, SSL
iCash

Subskrypcja

Mamy 50185 zarejestrowanych użytkowników.
Najnowszy użytkownik: sskijop


Nasi użytkownicy napisali:

  • 935001 wiadomości
  • w 246320 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)