Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]Prezentacja wyniku
Forum PHP.pl > Forum > Przedszkole
krystian1991x
Witam chce napisać skrypt który będzie prezentował załóżmy jakieś produkty dane pobierane są z bazy danych wszystko było by świetnie gdyby nie mała przeszkoda przeglądanie tych produktów polegało by na przesuwaniu za pomocą strzałek ( w lewo i prawo ) to też nie jest jeszcze takim problemem dla mnie jak sprawić aby pokazywało te produkty parami czyli 2 produkty na każdą "stronę" Zrobiłem wszystko już w html i js na sucho działa. Nie wiem tylko jak to ugryźć od strony php bo jak zrobię samą pętle jak to np robi się w newsach czyli pobieranie wszystkich newsów z bazy wpieprzanie tego do pętli i włala gotowe wyświetla wszystkie newsy wedle życzenia tutaj by wyswietlalo na tej zasadzie 2 takie same produkty a tak nie chcę. Nie liczę na gotowca chodź jak ktoś pokaże w praktyce takie rozwiązanie to będę wdzięczny.
erix
  1. LIMIT

?
krystian1991x
tzn ? nie wiem czy dobrze rozumiem ale sugerujesz ograniczyć liczbę pobieranych rekordów ? Ja nie chce ograniczać ;p

o może lepiej zrozumiecie mój problem jak wam wytłumaczę jak działa ten skrypt smile.gif

całego skryptu tłumaczył i kopiował nie będę ale przedstawię jak się sprawy mają. No więc wszystko sprowadza się do tego że "podstrony" w tym skrypcie js wyglądają tak jak na dole czyli jak przesunę dalej to mi załaduje 2część i tak dalej ;p
  1. <div class="qslide2">1część</div>
  2. <div class="qslide2">2część</div>
  3. <div class="qslide2">3część</div>
erix
A sprawdzałeś, jaką składnię ma LIMIT?
krystian1991x
chyba wiem o co ci już chodzi ale to i tak mi nie pomoże bo chce zrobić tak aby:
w części pierwszej wyświetlało 2 ostatnie rekordy np o id 5 oraz 6 gdy kliknie dalej pokazuje rekordy o id 3 oraz 4 gdy znowu kliknie dalej pokaże 2 oraz 3 a gdy kliknie wstecz pokaże 3 oraz 4 Dalej sądzisz że LIMIT mi w tym pomoże ? oraz że wystarczy stworzyć normalną pętle jak w zwykłym przypadku tylko dodać LIMIT z odpowiednimi parametrami ?
everth
To co mówisz da się wykonać i za pomocą SQLowego LIMIT, i za pomocą czystego PHP i nawet za pomocą JS - masz tablicę elementów - po prostu wczytujesz po 2 elementy naprzód lub w tył. Gdzie problem?
krystian1991x
że nie wiem jak to zrobić sciana.gif

tyle udało mi się do tej pory osiągnąć

plik .php
  1. <?php
  2.  
  3. require 'libs/Smarty.class.php';
  4.  
  5. $smarty = new Smarty;
  6. include_once('cfg.php');
  7.  
  8. $result = mysql_query("SELECT id, image_small, title, info, link FROM products LIMIT 2")
  9. or die("Niepoprawne zapytanie MySQL");
  10.  
  11.  
  12. while ($products = mysql_fetch_array($result))
  13. {
  14. $tablica[] = $products;
  15.  
  16. }
  17.  
  18. $smarty->assign('result',$tablica);
  19.  
  20. $smarty->display('home.tpl');
  21.  
  22.  
  23. ?>


plik .tpl
  1. <div style="float: left;"><a id="go-prev" href="java script:void(0)"><img border="0" src="templates/images/37.jpg"></a></div>
  2. <div style="height: 200px; float: left;">
  3. <div id="qscroller2" style="height: 215px;" class="qscroller"></div>
  4. <div class="hide">
  5.  
  6. {foreach from=$result key=myId item=products}
  7. <div id="qs2" class="qslide2">
  8.  
  9. <div style="width: 200;">
  10. <div style="clear: both; font-family: Tahoma; font-size: 11px; color: #182b09;"><img src="templates/images/40.jpg"><b>{$products.title}</b><br> <a href="#" style="color: #FFFFFF;">{$products.link}</a> </div>
  11. <div style="padding-left: 32px;padding-top: 18px;width: 351px; height: 523px; background-repeat: no-repeat; background-image: url('templates/images/39.jpg');"><img src="templates/images/{$products.image_small}"></div>
  12. </div>
  13. </div>
  14. {/foreach}
  15.  
  16. </div>
  17. </div>
  18. <div style="float: left;"><a id="go-next" href="java script:void(0)"><img border="0" src="templates/images/38.jpg"></a></div>
  19.  
  20. <script type="text/javascript">
  21. {literal}
  22. window.addEvent('domready', function() {
  23. var opt = {
  24. slides: 'qslide2',
  25. duration: 1500,
  26. buttons: {next:'go-next',prev:'go-prev'},
  27. transition: Fx.Transitions.Quint.easeOut
  28. }
  29. var scroller = new QScroller('qscroller2',opt);
  30. scroller.load();
  31. });
  32. {/literal}


Niestety dochodzę do tego momentu i więcej nie mogę nic zrobić kombinuje na próżno ;/ Do tego fragmentu
  1. <div id="qscroller2" style="height: 215px;" class="qscroller"></div>
wczytuje wszystkie divy z nadaną klasą qslide2 chce zrobić tak aby nie jeden produkt tam wyświetlało a 2 ostatnie tak jak to opisywałem wyżej ale nie że tylko 2 ostatnie bo jak ktoś przejdzie dalej to żeby mu pokazywało 2 poprzednie pomijając te które wczytało wcześniej aż dojdzie do produktu o id 1 smile.gif Mam nadzieje że ktoś naprowadzi mnie na coś konkretnego bo ograniczanie po przez LIMIT nic mi nie pomaga w tym przypadku biggrin.gif
skarabe.pl
Rozwiązanie jest takie, że <div class="qslide2"> wyświetlasz nie przy każdej iteracji, tylko co drugiej. Vide:
  1. {foreach from=$result key=myId item=products name=products}
  2. {if $smarty.foreach.products.index%2 == 0}
  3. <div id="qs2" class="qslide2">
  4. {/if}
  5. <div style="width: 200;">
  6. <div style="clear: both; font-family: Tahoma; font-size: 11px; color: #182b09;"><img src="templates/images/40.jpg"><b>{$products.title}</b><br> <a href="#" style="color: #FFFFFF;">{$products.link}</a> </div>
  7. <div style="padding-left: 32px;padding-top: 18px;width: 351px; height: 523px; background-repeat: no-repeat; background-image: url('templates/images/39.jpg');"><img src="templates/images/{$products.image_small}"></div>
  8. </div>
  9. {if $smarty.foreach.products.index%2 == 0}
  10. </div>
  11. {/if}
  12. {/foreach}

Trzeba koniecznie pamiętać o "name" w {foreach}
krystian1991x
a w jaki sposób mi to pomaga ? raczej nie pomaga :/ Bo wtedy pomija mi co 2 rekord z bazy tutaj macie prezentacje jak ten skrypt działa aktualnie i zrozumiecie może jak chce zrobić aby 2 pokazywało a nie jedno na stronę ;/
skarabe.pl
Spróbuj jeszcze raz zrozumieć to co napisałem. W żaden sposób nie pomija co drugiego rekordu.
krystian1991x
Pomija ... zobacz sobie utworzyłem w bazie 3 rekordy kolejno nazwane Numer Jeden, dwa i trzy i co i wyświetla tylko Numer 1 i 3 ;[ i to w dodatku osobno ;D a miało 2 koło siebie tongue.gif
skarabe.pl
A, już wiem - spróbuj zmienić warunek
{if $smarty.foreach.products.index%2 == 0}
na
{if $smarty.foreach.products.index%2 == 1}
krystian1991x
też nie działa tak jak powinno zobacz pokazuje tylko o numerze 2 co prawda pokazało 2 na jednej stronie ale jeden produkt po za zasięgiem skryptu js ;p
skarabe.pl
{if $smarty.foreach.products.index%2 == 1 || $smarty.foreach.products.last}
Więcej nie napiszę, bo nawet nie starasz się zrozumieć co moje poprawki oznaczają. Ciągle piszesz "zobacz", a zobaczyć niczego nie mogę bo żadnego linka testowego nie wklejasz.
krystian1991x
link podałem wcześniej sprawdz kilka postów wczesniej jest napisane "Tutaj" ... nie staram się zrozumieć ? staram się sprawdzam cały czas kombinuje też inaczej więc mi nie mów że się nie staram ;[

Nawet jeszcze raz ci wstawie i zobacz to efekt ostatniej poprawki czy tak chciałem aby ten skrypt wyglądał ?
skarabe.pl
A, chyba już widzę - jak pisałem żebyś zmienił warunek to zmieniłeś ten pierwszy zamiast tego drugiego. Wklejam całość jeszcze raz - dla porządku:
  1. {foreach from=$result key=myId item=products name=products}
  2. {if $smarty.foreach.products.index%2 == 0}
  3. <div id="qs2" class="qslide2">
  4. {/if}
  5. <div style="width: 200;">
  6. <div style="clear: both; font-family: Tahoma; font-size: 11px; color: #182b09;"><img src="templates/images/40.jpg"><b>{$products.title}</b><br> <a href="#" style="color: #FFFFFF;">{$products.link}</a> </div>
  7. <div style="padding-left: 32px;padding-top: 18px;width: 351px; height: 523px; background-repeat: no-repeat; background-image: url('templates/images/39.jpg');"><img src="templates/images/{$products.image_small}"></div>
  8. </div>
  9. {if $smarty.foreach.products.index%2 == 1 || $smarty.foreach.products.last}
  10. </div>
  11. {/if}
  12. {/foreach}
krystian1991x
Poprawiłem ale dalej nic sad.gif Zobacz wyświetla numer 1 i 3 w dodatku nie kolo siebie tylko dopiero jak przesunę
skarabe.pl
Kod HTML jest już ok - zobacz w źródło. Problem teraz leży w stylach i rozmiarach:
Zamiast
  1. <div style="width: 200;">

Spróbuj
  1. <div style="width: 351px; float: left;">
krystian1991x
Poprawiłem ale nie działa sprawdziłem też czy zadziała jak dam bez width albo nawet większe width ale nic to nie dało ;[

poprawka działa
skarabe.pl
U mnie wygląda to tak:
krystian1991x
z racji potrzeby użyłem innej biblioteki oraz skryptu do scrola smile.gif Dlatego teraz mam problem ponownie z prezentacją wyniku ;/ Używam teraz wszystkiego pod jQuery. Więc tak tutaj jest demo jak to aktualnie się prezentuje LINK Jak widać udało mi się doprowadzić to do stanu takiego jak chciałem czyli 6 produktów w 2 rządkach po 3 tongue.gif jednak jak widać z prawej strony znikła strzałka produktów jest łącznie 7 więc powinno się dać przewinąć dalej aby pokazało jeszcze ten 7 produkt oto kod jak coś więcej będzie potrzebne to piszcie wstawię

  1. <div style="float: left;"><a class="prev browse left"><img src="templates/images/37.jpg"></a></div>
  2.  
  3. <div class="scrollable">
  4.  
  5.  
  6. <div class="items">
  7.  
  8. {foreach from=$result key=myId item=products name=products}
  9. {if $smarty.foreach.products.index%3 == 0}
  10. <div>
  11. {/if}
  12. <a href="templates/images/{$products.img_small}?{$products.id}" title="{$products.title}" rel="lightbox"> <img title="{$products.title}" src="templates/images/{$products.img_small}"> </a>
  13. {if $smarty.foreach.products.index%3 == 3 || $smarty.foreach.products.last}
  14. </div>
  15. {/if}
  16.  
  17. {/foreach}
  18.  
  19.  
  20. </div>
  21.  
  22. </div>
  23. <div style="float: left;"><a class="next browse right"><img src="templates/images/38.jpg"></a></div>
  24.  
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.