Galeria
Wróc do listy tematów
- Szymon Głuch
- Jr. Member
- Postów: 33
- Rejestracja: 21.11.2011
Witam,
Czy ktoś może bawił się modyfikacją galerii zdjęć produktu?
Znalazłem całkiem ciekawy sklep, który zamiast galerii z miniaturami dodanych do produktu zdjęć wyświetlał jedynie duże, ale jako slideshow wszystkich dodanych do produktu. I to nie tylko na karcie produktu, ale również na liście produktów. Domyślam się, że odpowiada za to kawałek java. Ktoś coś takiego gryzł?
Będę wdzięczny za rozwiązanie, nawet teoretyczne, albo chociażby jakąś podpowiedź - gdzie w kodzie, itd.
- Herbamed
- Sr. Member
- Członek społeczności
- Postów: 172
- Rejestracja: 24.10.2009
Nie java tylko javascript trzeba znaleźć skrypt jqery od slideshow i go spróbować zaadaptować w kodzie w miejscach w których chce się by się pojawiał.
- Szymon Głuch
- Jr. Member
- Postów: 33
- Rejestracja: 21.11.2011
No właśnie o to chodzi. Poznałem się z CSS, między innymi dzięki Tobie. Mniej więcej wiem o co chodzi z javascript. Nawet ostatnio udało mi się linki na podstronie cms jako części grafiki skonstruować ;P
Ale w którym pliku się bawić z galerią? Standardowo dla kliku w zdjęcia w galerii jest ładowany fancybox. Ale ja chciałbym zmienić całą galerię na coś w stylu nivo slider osadzonego tam zamiast niej.
Znalazłem w \design\frontend\core\productbox\index\index.tpl wycinek, który może być odpowiedzialny za galerię:
<div class="product-photos">
{if isset($product.mainphoto.normal.path)}
{if $product.discountprice != NULL}
<img class="promo" src="{$DESIGNPATH}_images_frontend/core/icons/product-promo.png" alt="{trans}TXT_PROMOTION{/trans}" title="{trans}TXT_PROMOTION{/trans}"/>
{/if}
{if $product.new == 1}
<img class="promo" src="{$DESIGNPATH}_images_frontend/core/icons/product-novelty.png" alt="{trans}TXT_NEW{/trans}" title="{trans}TXT_NEW{/trans}"/>
{/if}
{if isset($product.photo[0].photoid) && $product.photo[0].photoid == 1}
<img class="mainphoto" src="{$product.mainphoto.normal}" alt="{$product.productname}">
{else}
<a rel="product" href="{$product.mainphoto.orginal}" class="mainphotoContainer">
<img class="mainphoto" src="{$product.mainphoto.normal}" alt="{$product.productname}">
</a>
{/if}
{/if}
<div class="productThumbs">
{section name=i loop=$product.otherphoto.small}
<a rel="product" href="{$product.otherphoto.orginal[i]}"><img style="width:47px;" src="{$product.otherphoto.small[i]}" alt="{trans}TXT_ADDITIONALPHOTO{/trans}"></a>
{/section}
</div>
</div>
... ale nie wiem czy w tym pliku można grzebać i czy dobrze kombinuję.
- Herbamed
- Sr. Member
- Członek społeczności
- Postów: 172
- Rejestracja: 24.10.2009
jeśli masz zrobione namespace ( a mam nadzieję że masz bo podajesz ścieżkę od core zamiast od namespace)to tak samo jak z css robisz z plikami z frontend i na nich możesz się bawić w razie czego przekopiujesz z core oryginalny plik
Zapewne to jest odpowiedzialne za miniaturki pod zdjęciem głównym :
<div class="productThumbs">
{section name=i loop=$product.otherphoto.small}
<a rel="product" href="{$product.otherphoto.orginal[i]}"><img style="width:47px;" src="{$product.otherphoto.small[i]}" alt="{trans}TXT_ADDITIONALPHOTO{/trans}"></a>
{/section}
</div>
- Szymon Głuch
- Jr. Member
- Postów: 33
- Rejestracja: 21.11.2011
jeśli masz zrobione namespace ( a mam nadzieję że masz bo podajesz ścieżkę od core zamiast od namespace)
I tak i nie ;)
Mam namespace, ale póki co dziabię na core, bo po upisaniu kawałka css swojego namespace prościej mi się było przełączyć na core i modyfikować całość. A docelowo się przeniesie do css w swoim namespace tylko kawałki, które faktycznie będą zmienione.
A poza tym ten kawałek kodu znalazłem w core, bo mój namespace to póki co samo css i grafika.
Fajnie by było to rozegrać, może jeszcze komuś się przyda, bo standardowa galeria jest dobra, ale nudna.
Nivo slider jest już używany w boxie slideshow w prosty sposób:
<div id="slider" class="nivoSlider" style="height:{$height}px;display:block">
{section name=s loop=$slideshow}
<a href="{$slideshow[s].url}"><img src="{$DESIGNPATH}{$slideshow[s].image}" alt="" title="{$slideshow[s].caption}" /></a>
{/section}
</div>
{literal}
$(window).load(function() {
$('#slider').nivoSlider({
effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed:500, // Slide transition speed
pauseTime:3000, // How long each slide will show
startSlide:0, // Set starting Slide (0 index)
directionNav:true, // Next & Prev navigation
directionNavHide:false, // Only show on hover
controlNav:true, // 1,2,3... navigation
controlNavThumbs:false, // Use thumbnails for Control Nav
pauseOnHover:true, // Stop animation while hovering
});
});
{/literal}
Ale zupełnie nie wiem jak to rozgryźć z tym kawałkiem wczytującym zdjęcia w galerii na stronie produktu, bo tam jest część wczytująca główne zdjęcie, a później kawałek kodu, który wskazałeś wczytujący miniatury, ale bez głównego zdjęcia. I nijak nie wiem jak to scalić, żeby wczytywało wszystkie do slidera tak jak to robi slideshow box…
Edytowany: 20 Styczeń 2012 22:37 przez Szymon Głuch
- Karol Kępa
- Nowicjusz
- Członek społeczności
- Postów: 21
- Rejestracja: 02.07.2009
Mozesz zrobić coś takiego :
dla przykladu zrobiłem klase “test”
<div class="test" class="nivoSlider" style="height:200px;display:block">
<img class="mainphoto" src="{$product.mainphoto.normal}" /> <!-- Rozwiazanie Twojego problemu zdjecie glowne-->
{section name=i loop=$product.otherphoto.small}
<img src="{$product.otherphoto.normal[i]}" /> <!-- o ile chcesz aby zmienialy sie miniaturki zmien normal na small -->
{/section}
</div>
{literal}
$(window).load(function() {
$('.test').nivoSlider({
effect:'fade',
directionNav:false,
directionNavHide:true,
controlNav:false,
controlNavThumbs:false,
pauseOnHover:true
});
});
{/literal}
Powinno działać o ile działa Tobie Nivo slider i masz dolaczone wszytkie pliki js/css
Pozdrawiam
- Szymon Głuch
- Jr. Member
- Postów: 33
- Rejestracja: 21.11.2011
Powinno działać o ile działa Tobie Nivo slider i masz dolaczone wszytkie pliki js/css
Dzięki, śmiga. Niestety Geko chyba posiada jedynie wybrane elementy wykończenia nivo, ale działa tak jak chciałem, wystarczy tylko dopracować.
EDIT: Hmm… Przydałoby się chyba jakoś załadować zdjęcia wcześniej, bo najpierw wyświetla je jedno pod drugim by dopiero potem wczytać nivo.
Edytowany: 21 Styczeń 2012 23:01 przez Szymon Głuch
- Jarosław Chmielecki
- Sr. Member
- Postów: 130
- Rejestracja: 02.08.2011
Może dałbyś się przekonać, abyś się pochwalił wynikiem? 
- Szymon Głuch
- Jr. Member
- Postów: 33
- Rejestracja: 21.11.2011
Może dałbyś się przekonać, abyś się pochwalił wynikiem? :)
Nie bardzo lubię pokazywać coś co nie jest skończone, a dziergam ten sklep wieczorami jak znajdę wolną chwilę po ciężkiej pracy, żeby uruchomić go na wiosnę. Ale co mi tam… Może komuś się przyda. Podziękowania dla Karola, bo to on podał koncepcję.
Po pierwsze trochę manuala dla tych co będą chcieli pogrzebać:
1. Najlepiej własny namespace
2. Część kodu do zastąpienia z oryginalnego pliku \design\frontend\core\productbox\index\index.tpl jest w tym poście. Kawałek kodu jest na początku pliku.
3. Nowy kod zastępujący ten podany powyżej:
<div class="product-photos" class="nivoSlider" style="height:450px;width:450px !important;overflow:hidden;dispaly:block;box-shadow:0 0 5px #CCCCCC">
<img class="mainphoto" src="{$product.mainphoto.normal}" />
{section name=i loop=$product.otherphoto.small}
<img src="{$product.otherphoto.normal[i]}" />
{/section}
</div>
{literal}
$(window).load(function() {
$('.product-photos').nivoSlider({
effect:'boxRainReverse',
slices: 5,
boxCols: 5,
boxRows: 5,
animSpeed: 2500,
pauseTime: 5000
directionNav: true,
directionNavHide: true,
pauseOnHover: true,
controlNav:false,
controlNavThumbs:false,
});
});
{/literal}
Ważne są w drugim wierszu: rozmiary wyświetlanych slajdów, proponuję dopasować osobiście; overflow:hidden, który w prosty sposób ukrywa defekt przy pierwszym ładowaniu danego slajdu w przeglądarce, a objawiającego się załadowaniem wszystkich zdjęć jedno pod drugim zanim mechanizm złoży z nich slajd; box-shadow daje ładny efekt, ale nie działa w starszych przeglądarkach.
Zapomniałem o uruchomieniu poprawnym nawigacji, style wpisałem bezpośrednio w kod. Trzeba by to jeszcze wygładzić, jak cały mój ten sklep.
Efekt ma wyglądać mniej więcej tak: link
- potkal
- Sr. Member
- Członek społeczności
- Postów: 126
- Rejestracja: 23.12.2011
ladne to… :)
- Jarosław Chmielecki
- Sr. Member
- Postów: 130
- Rejestracja: 02.08.2011
Dzięki Po dopasowaniu szybkości i przemyśleniu kolejnych zdjęć- będzie fajny efekt.
Osobiście myślałbym jeszcze nad udostępnieniu przycisku “następne”, czy coś, ale to już szczegóły 
- potkal
- Sr. Member
- Członek społeczności
- Postów: 126
- Rejestracja: 23.12.2011
przydalo by sie wprowadzic w geko cos takiego jak moduly dodatkowe robione przez urzytkownikow:) wyslac kod do adminow, aby zapuscili “dodatki” w gekolab… jak sie komus spodoba to zainstaluje i zmieni sposob pokazywania… oczywiscie jak ktos zechce udostepnic:)
- Szymon Głuch
- Jr. Member
- Postów: 33
- Rejestracja: 21.11.2011
No właśnie o tym pisałem w kontekście przycisków. Nie miałem zupełnie czasu się rozeznać czy pełne nivo jest wrzucone w standardzie w geko ani stworzyć odpowiednio css.
Wyszukaj Post
Legenda oznaczeń postów
- Nowe posty
- Gorący temat z nowymi postami
- Zamknięty temat
- Nowa ankieta
- Temat przyklejony
- Brak nowych postów
- Gorący temat bez nowych postów
- Temat przeniesiony
- Stara ankieta
- Pilne ogłoszenie
