Strony:

Galeria Pozioma - Rozwiązanie

adimoo

Avatar: adimoo

2013-01-17 01:47

Potrafię spokojnie wykonać albo (lepiej) podać rozwiązanie dla wykonania galerii poziomej w Q.Cart 5.2 (bez dodatkowych galerii - jest to bardzo proste), niestety nie wiem czy jest to zgodne z licencją więc pytam adminów : czy mogę przedstawić rozwiązanie i nie będą wyciągane wobec mnie żadne konsekwencje?

» Quick.Cart v5.x

Jupraw

Avatar: Jupraw

2013-01-17 04:59

Jeżeli nie wykorzystujesz rozwiązania z płatnych wersji to możesz podawać bez konsekwencji. Dotychczas takie rozwiązania już były.
Do galerii można też wykorzystać proste rozwiązanie podawane przez nas w Quick Cms, które jest zamieszczone pod http://opensolution.org/Quick.Cms/forum/galeria-w-quickcms-50,2262.html

boboo

Avatar: boboo

2013-01-17 07:10

@Jupraw,
a jeśli kolega adimoo nie ma dostępu do płatnych wersji i przypadkiem wpadł na ten sam pomysł (prawdę powiedziawszy - takie rozwiązanie po analizie kodu Free narzuca się samo :-) ) to co wtedy?

BTW, sporo eksperymentowałem z galeriami w różnych ich postaciach. Stronicowane, paskowe i co tam jeszcze. O ile przy pionowych galerich ma sens zastosowanie list z floatem, to dla poziomych galerii na dziś najsensowniejszym rozwiązaniem są tabele
(przynajmniej dla mnie).

Spójrz w randomCategoryProducts (free dla free), przecież tam masz gotowca dla galerii poziomej. Trzeba tylko co pewną ilość (zdjęć w rzędzie) dodać <tr> i prawie fertig.

Ja sobie teraz zrobiłem "aktywne zdjęcia".
Tzn. dodaję je w tekście decsFull (potrzebny plugin Image do TinyMce), a maleńka funkcja przerabia je na takie, jakie są w galerii, czyli olinkowane i z aktywnym mlBox'em.
W zależności od tego, gdzie są ulokowane, dostają odpowiednie oformatowanie (marginy itp.)
O, tutaj:
http://www.kimla.de/qc6test/

www.kimla.de

Jupraw

Avatar: Jupraw

2013-01-17 08:36

Zgadzam się z Tobą w całości.
Chodziło mi o taką sytuację, że jota w jotę stosuje się kod z płatnej wersji, z niewielkimi zabiegami kosmetycznymi, np. zmieniam style, nadaję swoje nazwy itd.
Na tych forach było kilka rozwiązań i uważam, że wszystkie były dobre, w zależności, kto jak potrafi i do czego chce wykorzystać.
W moim rozwiązaniu (pełna jego próba jest na http://cms.siemianowka.pl ), a opierałem się na tym co przedstawił kiedyś Guido, można na jednej stronie, z poziomu admina, dodawać zdjęcia w różnych wielkościach i w różnej ilości układu poziomego. Wiem, że to nie każdemu jest potrzebne i wcale to nie jest najlepsze rozwiązanie, ale jest i takich rozwiązań jest kilka.

Na koniec chylę czoła przed Tobą, ponieważ z wiedzą w tych tematach jestem daleko za twoimi umiejętnościami.
Pozdro

adimoo

Avatar: adimoo

2013-01-23 10:32

Nie miałem nigdy wersji płatnej 5.2 więc nie mam pojęcia jak tam to wygląda, z uwagi na to podaję moją WŁASNĄ wersję zdarzeń :

1. w pliku : database/config/general.php

linię:

$aPhotoTypes = Array( 1 => $lang['Left'], 2 => $lang['Right'] );

zamienić na:

$aPhotoTypes = Array( 1 => $lang['Left'], 2 => $lang['Right'], 3 => $lang['Down'] );

2. w pliku : database/translations/pl.php

Dodać np. po linii

$lang['Left'] = "Lewa";

linijkę:

$lang['Down'] = "Dół";

3. w pliku core/files.php

liniję :

if( $iType < 3 ){

zamienić na :

if( $iType < 99 ){

4. w pliku core/common-admin.js

linijkę :

if( oObj.value == 3 || oObj.value == 4 ){

zamienić na

if( oObj.value == 4 || oObj.value == 5 ){

(Utrzymujemy nadal ogłoszenie, że GALERIA jest tylko w wersji EXT!)

5. w templates/admin/files.php

Wszystkie linijki (są 4ry wystąpienia tego kodu):

<option value="3" class="disabled">$lang[Gallery]</option>

zamienić na :

<option value="4" class="disabled">$lang[Gallery]</option>

6. w templates/pages_default.php

dodajemy :

$aImages[3]

np. po linijce :

$sProductsList<!-- here is content from PRODUCTS_DEFAULT blocks -->

(w zależności GDZIE zdjęcia się mają pojawić zdjęcia, w tym wypadku pod listą produktów)

7. w templates/products_default.php

dodajemy :

$aImages[3]

np. po linijce :

<div class="content" id="productDescription">$aData[sDescriptionFull]</div>

(w zależności GDZIE zdjęcia się mają pojawić, w tym wypadku pod opisem)

8. W plik .css musimy sobie ogarnąć #imagesList3 który odpowiada za wyrzucanie zdjęć z $aImages[3] np.

#imagesList3 li{
width: 32%;
Twój kod CSS;
} etc.

============== BONUS =============

Ja wykonuję listy zdjęć na <div><div> zamiast <ul><li> - uważam to za łatwiejsze w 'obróbce'. Teraz mamy dostęp do "całości" listy (poprzednio <ul>) poprzez plik css :

#imagesList1
#imagesList2
#imagesList3

oraz do każdego elementu (poprzednie <li>) poprzez

#imagesList1_sub
#imagesList2_sub
#imagesList3_sub


By też tak to rozwiązać należy :

1. w pliku templates/pages_default.tpl zamienić blok :

<!-- BEGIN IMAGES_DEFAULT -->
<ul class="imagesList" id="imagesList$aData[iType]"><!-- START LIST -->
<li>
<a href="$config[dir_files]$aData[sFileName]" class="mlbox[pages]" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a><!-- IF:START DESCRIPTION -->
<div>$aData[sDescription]</div><!-- IF:END DESCRIPTION -->
</li><!-- END LIST -->
</ul>
<!-- END IMAGES_DEFAULT -->

na następujący :

<!-- BEGIN IMAGES_DEFAULT -->
<div class="imagesList" id="imagesList$aData[iType]"><!-- START LIST -->
<div id="imagesList$aData[iType]_sub">
<a href="$config[dir_files]$aData[sFileName]" class="mlbox[pages]" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a><!-- IF:START DESCRIPTION -->
<div>$aData[sDescription]</div><!-- IF:END DESCRIPTION -->
</div><!-- END LIST -->
</div>
<!-- END IMAGES_DEFAULT -->

2. w pliku templates/products_default.tpl zamienić blok :

<!-- BEGIN IMAGES_DEFAULT -->
<ul class="imagesList" id="imagesList$aData[iType]"><!-- START LIST -->
<li>
<a href="$config[dir_files]$aData[sFileName]" class="mlbox[products]" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a><!-- IF:START DESCRIPTION -->
<div>$aData[sDescription]</div><!-- IF:END DESCRIPTION -->
</li><!-- END LIST -->
</ul>
<!-- END IMAGES_DEFAULT -->

na blok :

<!-- BEGIN IMAGES_DEFAULT -->
<div class="imagesList" id="imagesList$aData[iType]"><!-- START LIST -->
<div id="imagesList$aData[iType]_sub">
<a href="$config[dir_files]$aData[sFileName]" class="mlbox[products]" title="$aData[sDescription]"><img src="$config[dir_files]$aData[iSizeValue2]/$aData[sFileName]" alt="$aData[sDescription]" /></a><!-- IF:START DESCRIPTION -->
<div>$aData[sDescription]</div><!-- IF:END DESCRIPTION -->
</div><!-- END LIST -->
</div>
<!-- END IMAGES_DEFAULT -->

================= Z Nurtujących problemów ==============

Pierwsze zdjęcie jest większe niż reszta zdjęć w Galerii (Lewe "główne" - mnie to irytuje ;)) usuwamy poprzez zamianę w pliku :

templates/products_default.tpl linijki :

<div id="imagesList1" class="imagePreview"><a href="$config[dir_files]$aDefault[sFileName]" class="mlbox[preview]" id="previewLink" title="$aDefault[sDescription]"><img src="$config[dir_files]$aDefault[iSizePreview]/$aDefault[sFileName]" alt="$aDefault[sDescription]" id="imgPreview" /></a>

na linijkę :

<div id="imagesList1" class="imagePreview"><a href="$config[dir_files]$aDefault[sFileName]" class="mlbox[preview]" id="previewLink" title="$aDefault[sDescription]"><img src="$config[dir_files]$aDefault[iSizeValue2]/$aDefault[sFileName]" alt="$aDefault[sDescription]" id="imgPreview" /></a>

Dziekujemy za uwagę :)

VRT

adimoo

Avatar: adimoo

2013-01-23 10:45

@Juraw - podaj swoje rozwiązanie bo też mi się podoba :)

VRT

Jupraw

Avatar: Jupraw

2013-01-23 11:57

To jest dla QuickCart 6.0, ale może być dopasowana do 5.2. Identycznie robi się dla QuickCms 5.0 (są tam tylko inne wielkości zdjęć, o czym należy pamiętać).

1) W pliku templates/default/style.css
po wierszu:

#imagesList2{clear:right;float:right;margin:8px 0 0 15px;}

dodajemy style galerii dolnych (zrobiłem trzy: 4 zdjęcia x 75px, 3 zdjecia x 150px i 2 zdjęcia x 180px):

#imagesList3, #imagesList4, #imagesList5{float:left;margin:10px 0 0 0;width:100%;}
#imagesList3 li{width:24%; float:left;height:100px;}
#imagesList4 li{width:33%; float:left;height:155px;}
#imagesList5 li{width:48%; float:left;height:195px;}

2) W pliku templates/default/page.php
po wierszu:

echo $oFile->listFiles( $aData['iPage'] ); // display files included to the page

dodajemy:

echo $oFile->listImagesByTypes( $aData['iPage'], 3 ); // displaying images with type: gallery 75
echo $oFile->listImagesByTypes( $aData['iPage'], 4 ); // displaying images with type: gallery 150
echo $oFile->listImagesByTypes( $aData['iPage'], 5 ); // displaying images with type: gallery 180

3) W pliku database/translations/pl.php oraz pozostałych plikach językowych

dodajemy:

$lang['Gallery75'] = "Galeria75";
$lang['Gallery150'] = "Galeria150";
$lang['Gallery180'] = "Galeria180";

4) W pliku database/config/general.php

linię:

$aPhotoTypes = Array( 1 => $lang['Left'], 2 => $lang['Right'] );

zamienić na:

$aPhotoTypes = Array( 1 => $lang['Left'], 2 => $lang['Right'], 3 => $lang['Gallery75'], 4 => $lang['Gallery150'], 5 => $lang['Gallery180'] );

Koniec

Galerie zdjęć ustawiamy w panelu administracyjnym, w danej stronie, wybierając dla poszczególnych zdjęć typ galerii i ustawiając taką samą wartość wymiaru zdjęcia. W ten sposób na jednej stronie możemy mieć galerię złozona z różnej wielkości zdjęć i w różnej ilości w poziomie.

Uwaga: można zrezygnować z Galeria150 i Galeria180, a wykorzystać Galeria75 regulując ilość zdjęć w jednej linii, w zależności od potrzeb, wielkościami: width i height w stylach.

knopper

Avatar: knopper

2014-05-12 12:42

Zastosowałem pomysł @Jupraw jednak nie wiem dlaczego ale zdjęcia wstawione do galerii mam zdublowane.
url=> http://www.carpol.pl/quick/index.php?niepelnosprawni,11
jakiś pomysł ?

Jupraw

Avatar: Jupraw

2014-05-14 08:18

Na stronie, którą podałeś, nie ma zdublowanych zdjęć.
Do rozwiązania, które podałem, warto zastosować, w sytuacji wstawiania do galerii zdjęć poziomych i pionowych, wartość hight dla #imagesList3 li (i pozostałych 4 i 5, jeżeli macie).

knopper

Avatar: knopper

2014-05-14 11:24

Dzięki za odpowiedź - faktycznie nie ma już dubli - poradziłem sobie jakoś z tym bałaganem.

Jokeer

Avatar: Jokeer

2014-11-12 22:31

Odgrzewając już trochę temat, mam pytanie co do rozwiązania zaproponowanego przez Jurpaw-a. Zastosowałem go, zdjęcia wyświetlają mi się poziomo, ale jest pewien problem. Chodzi o to, że kiedy mam zdjęć więcej niż jeden rząd, zdjęcia te są w nieładny sposób ze sobą sklejane jak widać tutaj: <a href=http://zapodaj.net/f2e1c07105b06.png.html>galeria_cms.png</a> próbowałem to zmodyfikować przez parametr margin w .css, ale wszystkie zdjęcia są traktowane jako całość, a nie wierszami.

1. W jaki sposób mogę uzyskać równe odstępy pomiędzy wierszami (fajnie by wyglądały takie same jak między miniaturkami)?
2. Jak mogę usunąć te kropki przy każdej z miniaturek?

Z góry wielkie dzięki za pomoc :)

Jokeer

Avatar: Jokeer

2014-11-12 22:32

Bezpośredni link do zdjęcia z postu wyżej -> http://zapodaj.net/f2e1c07105b06.png.html

grafiQa

Avatar: grafiQa

2014-11-12 23:21

Kropki biora ie z tego ze obrazki sa ujete jako lista. Zeby sie ich pozbyc wpisz w stylach w list-style:none;

Jarek - napisane z pulpitu Quick.Cms 6.0

Jupraw

Avatar: Jupraw

2014-11-13 06:26

Sprawdź następujące rozwiązanie. Wywal wszystkie zdjęcia, które masz na stronie.
Zdjęcia które będziesz chciał wstawić, edytuj do takich samych wymiarów, np. 800x600 (co do 1 px). Zdjęcia zrobione w pionie także należy edytować i przerobić do poziomu, nadając np. w GIMP-ie tło boków, aby powstał wymiar także 800x600, a nie 600x800. Potem wstaw znów na stronę.

Jupraw

Jupraw

Avatar: Jupraw

2014-11-13 11:12

Propozycje rozwiązań do najnowszych wersji (starsze można zrobić na ten wzór).

Rozwiązanie dla Quick.CMS v. 5.5

1) W pliku database/translations/pl.php oraz w pozostałych plikach wersji językowych:
po wierszu:
$lang['Menu_2'] = "Kategorie";
dodać:
$lang['Fotogaleria'] = "Fotogaleria";

2) W pliku database/config/general.php
wiersz:
$aPhotoTypes = Array( 1 => $lang['Left'], 2 => $lang['Right'] );
zmienić na:
$aPhotoTypes = Array( 1 => $lang['Left'], 2 => $lang['Right'], 5 => $lang['Fotogaleria'] );

3) W pliku templates/default/page.php
po wierszu:
echo $oFile->listFiles( $aData['iPage'] ); // display files included to the page
dodać wiersz:
echo $oFile->listImagesByTypes( $aData['iPage'], 5 ); // displaying images with type: gallery

4) W pliku templates/default/style.css
po wierszu:
#imagesList2{clear:right;float:right;margin:8px 0 0 15px;}
dodać wiersz:
#imagesList5{float:left;margin:0 0 0 0;width:100%;}
#imagesList5 li{width:23%;float:left;padding:0 2% 1% 0;height:150px;}


Rozwiązanie dla Quick.Cart v. 6.5

1) W pliku database/translations/pl.php oraz w pozostałych plikach wersji językowych:
po wierszu:
$lang['First_name'] = "Imię";
dodać:
$lang['Fotogallery'] = "Fotogallery";

2) W pliku database/config/general.php
wiersz:
$aPhotoTypes = Array( 1 => $lang['Left'], 2 => $lang['Right'] );
zmienić na:
$aPhotoTypes = Array( 1 => $lang['Left'], 2 => $lang['Right'], 5 => $lang['Fotogaleria'] );

3) W pliku templates/default/page.php
po wierszu:
echo $oFile->listFiles( $aData['iPage'] ); // display files included to the page
dodać wiersz:
echo $oFile->listImagesByTypes( $aData['iPage'], 5 ); // displaying images with type: gallery

4) W pliku templates/default/style.css
po wierszu:
#imagesList2{clear:right;float:right;margin:8px 0 0 15px;}
dodać wiersz:
#imagesList5{float:left;margin:0 0 0 0;width:100%;}
#imagesList5 li{width:23%;float:left;padding:0 2% 1% 0;height:150px;}

Jupraw

Jokeer

Avatar: Jokeer

2014-11-13 22:50

Jurpaw jesteś wielki Twoje rozwiązanie wygląda super !!! :) Jednak jeszcze dwa pytania...

1. Jak wyśrodkować te zdjęcia? Wszelakie próby modyfikacji #imagesList5 li{width:23%;float:left;padding:0 0 1% 0;height:150px;list-style:none;} nie pomogły...
2. Dziwny sposób traktowania tej galerii przez div. Mianowicie zdjęcia te dodaje w divie, który ma parametr height: 100%;. Jednak zdjęcia nie są zawarte w treści tego diva, który kończy się na tekście. Wygląda to tak: http://zapodaj.net/images/468cca0808299.png czy jest sposób na poprawienie tego błędu?

Jokeer

Jupraw

Avatar: Jupraw

2014-11-13 23:16

Kiedyś próbowałem bawić sie z div-em, ale także nie wychodziło. Nie udało się także ustawić dokładnego wyśrodkowania. Ogólnie ustawiam tą galerię w czterech kolumnach dla miniaturek 150px, dlatego też parametr width ustawiam na 23%. W zależności od szerokości strony zmieniam wartości padding. Kiedyś także wprowadzałem parametr margin. Musisz to zrobić na zasadzie prób i błędów.

Jupraw

Jokeer

Avatar: Jokeer

2014-11-14 08:26

To skoro nie da się zrobić tej galerii w div-ie to jakie jest inne rozwiązanie?

Jokeer

Jupraw

Avatar: Jupraw

2014-11-14 10:02

Prześlij mi na jupraw@poczta.onet.pl style.css.

Jupraw

skinkers

Avatar: skinkers

2014-11-23 15:25

Cześć Nie działa mi galeria występuje błąd w pliku general url=>http://www.dabmeble.pl/hdm/
Pomożecie?

Strony:
Do góry
o nas | kontakt