Wyświetlanie miniaturek zdjęć w poziomie! :)

euphoria-art

Avatar: euphoria-art

2012-04-25 23:31

ja mam trochę inaczej, najlepsze ustawienie na fotki 100px to
#imagesList3{float:left;margin:10px 0 0 5px;}
#imagesList3 li{float:left;margin:8px;color:#4e4e3d;font-size:0.917em;height:130px;width:105px;}
ten sposób powoduje że długie podpisy pod zdjęciami nie są sklejone z innymi bocznymi podpisanymi fotkami w galerii.

Sebastian Grabowski

Avatar: Sebastian Grabowski

2015-10-20 11:33

Ja obecnie "tworzę" stronkę na Quick CMS 5.4 i problem wyświetlania zdjęć w poziomie rozwiązałem w następujący sposób:

1. w pliku general.php zmodyfikowałem sobie wielkości miniatur w następujący sposób:

 
$config
['images_sizes'] = Array( => 750=> 75=> 100=> 50=> 300=> 315=> 900=> 230=> 240);



2. następnie w pliku style.css (w katalogu z szablonem /templates/szablon/style.css) zmieniłem dwie wartości w grupie styli dotyczących obrazów


/* IMAGES STYLES */
.imagesList{list-style:nonedisplayinline;}
.
imagesList li{margin:25px 25px 25px 0;background:inherit;text-align:centerdisplayinline;}
.
imagesList li div{text-align:center;}
.
subpagesList li img, .imagesList li img, .imagesGallery img#subpagesGallery img{padding:1px;border:1px solid #e0e0e0;-webkit-box-shadow:0 0 5px rgba(0,0,0,.15);box-shadow:0 0 5px rgba(0,0,0,.15); display: inline;}
.subpagesList li img:hover, .imagesList li img:hover, .imagesGallery img:hover#subpagesGallery img:hover{border-color:#aaa;}

#imagesList1{float:left;margin:10px 20px 0 0;}
#imagesList2{clear:right;float:right;margin:8px 0 0 15px;}



zmiany:
a) w pierwszej i drugiej oraz czwartej linii kodu dopisałem:

 displayinline 


b) w drugiej linii kodu ustawiłem sobie wartości marginesu lewego i prawego dla wczytywanych zdjęć odpowiednie do wymiarów miniatur (trzeba zmieniać w zależności od wymiarów miniatur

Efekt końcowy jest na tyle zadowalający, że pozwala na osiągnięcie oczekiwanego efektu przez zainteresowaną osobę.

Sebastian Grabowski

f_o_x

Avatar: f_o_x

2015-11-07 19:48

Witam. Czy ktoś już próbował modyfikować kod dla Cms 6 w temacie Galerii zdjęć w poziomie?

euphoria-art

Avatar: euphoria-art

2015-11-07 20:10

quick.cms6
1) w templates/default/style.css
zamień 2 bloki:

/* list global */
.images-1, .images-2{list-style:none;}
.images-1 li, .images-2 li{margin:0 0 15px 0;background:inherit;text-align:center;}
.images-1 p, .images-2 p{max-width:250px;margin:0 auto;color:#0093dd;font-size:0.875em;}
/* list custom */
.images-1{clear:left;float:left;margin:9px 20px 0 0;}
.images-2{clear:right;float:right;margin:8px 0 0 15px;}

na te:

/* list global */
.images-1, .images-2, .images-3{list-style:none;}
.images-1 li, .images-2 li, .images-3 li{margin:0 0 15px 0;background:inherit;text-align:center;}
.images-1 p, .images-2 p, .images-3 p{max-width:250px;margin:0 auto;color:#0093dd;font-size:0.875em;}
/* list custom */
.images-1{clear:left;float:left;margin:9px 20px 0 0;}
.images-2{clear:right;float:right;margin:8px 0 0 15px;}
.images-3{float:left;margin:10px 0 15px 5px;}
.images-3 li{float:left;margin:8px;height:123px;width:123px;}

Uwaga!: w zależności od szerokości strony i wielkości ikonek zdjęć należy regulować dwiema wielkościami: width i height.

2) w templates/default/page.php
po:
echo $oFile->listFiles( $aData['iPage'] ); // display files included to the page
dodać:
echo $oFile->listImages( $aData['iPage'], Array( 'iType' => 3 ) ); // displaying images with type: gallery


3) w database/config.php
linię:
$config['images_locations'] = Array( 1 => 'Lewa strona', 2 => 'Prawa strona', 0 => 'Tylko lista' ); // domyślna wartość: 1 => 'Lewa', 2 => 'Prawa', 0 => 'Tylko lista'
zmienić na:
$config['images_locations'] = Array( 1 => 'Lewa strona', 2 => 'Prawa strona', 3 => 'Galeria', 0 => 'Tylko lista' ); // domyślna wartość: 1 => 'Lewa', 2 => 'Prawa', 3 => 'Galeria', 0 => 'Tylko lista'
KONIEC!

Jupraw

Avatar: Jupraw

2015-11-07 20:16

Jedna z wersji:
w pliku style.css

/* IMAGES STYLES */
/* list global */
.images-1, .images-2, .images-3, .images-4{list-style:none;}
.images-1 li, .images-2 li, .images-3 li, .images-4 li{margin:0 0 15px 0;background:inherit;text-align:center;}
.images-1 p, .images-2 p, .images-3 p, .images-4 p{max-width:150px;margin:0 auto;color:#0093dd;font-size:0.7em;}
/* list custom */
.images-1{clear:left;float:left;margin:9px 20px 0 0;}
.images-2{clear:right;float:right;margin:8px 0 0 15px;}
.images-3{float:left;margin:10px 0 10px 5px;}
.images-3 li{float:left;margin:0 5px 0 0;height:180px;width:150px;}
.images-4 li{float:left;margin:0 5px 0 0;height:150px;width:130px;}

w pliku pages.php
po wierszu:
echo $oPage->listPages( $aData['iPage'] ); // displaying subpages
dodaj:
echo $oFile->listImages( $aData['iPage'], Array( 'iType' => 3 ) ); // displaying images with type: gallery
echo $oFile->listImages( $aData['iPage'], Array( 'iType' => 4 ) ); // displaying images with type: gallery

w config.php

$config['images_thumbnails'] = Array( 130, 150 ); // domyślna wartość: Array( 100, 200 )
$config['images_locations'] = Array( 1 => 'Lewa strona', 2 => 'Prawa strona', 3 => 'Galeria', 4 => 'Galeria130', 0 => 'Tylko lista' ); // domyślna wartość: 1 => 'Lewa', 2 => 'Prawa', 3 => 'Galeria', 0 => 'Tylko lista'

Można zrobić tylko jedną galerię.
Chyba nic nie zapomniałem.

Jupraw

f_o_x

Avatar: f_o_x

2015-11-08 16:59

Euphoria-art i Jupraw dziękuję za pomoc. Wstawiłem kod i w sumie wszystko gra. Dopasowałem sobie parametry i galeria śmiga bardzo pięknie aczkolwiek zauważyłem że zniknęło mi obramowanie miniatur które było zaszyte w moim stylu. Poniżej kod oryginalny z pliku style.css i ten po modyfikacji. Boję się, że sknocę mógłbym prosić o podpowiedź?


/* list global 
.images-1, .images-2{list-style:none;}
.images-1 li, .images-2 li{margin:0 0 15px 0;background:inherit;text-align:center;}
.images-1 img, .images-2 img{border:5px solid #4e4e4e;}
.images-1 img:hover, .images-2 img:hover{border-color:#71582e;}  /*  #8e201f #71582e   
.images-1 p, .images-2 p{max-width:250px;margin:0 auto;color:#888;font-size:0.875em;}
/* list custom 
.images-1{clear:left;float:left;margin:9px 20px 0 0;}
.images-2{clear:right;float:right;margin:8px 0 0 15px;}
*/

/* list global */
.images-1, .images-2, .images-3{list-style:none;}
.
images-1 li, .images-2 li, .images-3 li{margin:0 0 15px 0;background:inherit;text-align:center;}
.
images-1 p, .images-2 p, .images-3 p{max-width:250px;margin:0 auto;color:#0093dd;font-size:0.875em;}
/* list custom */
.images-1{clear:left;float:left;margin:9px 20px 0 0;}
.
images-2{clear:right;float:right;margin:8px 0 0 15px;}
.
images-3{float:left;margin:10px 0 15px 5px;}
.
images-3 li{float:left;margin:8px;height:218px;width:218px;}

Jupraw

Avatar: Jupraw

2015-11-08 18:06

dodaj

.images-1 img, .images-2 img, .images-3 img{border:5px solid #4e4e4e;}

Jupraw

f_o_x

Avatar: f_o_x

2015-11-08 18:47

Już zaczaiłem składnię. Dorzuciłem jeszcze jedną linię dla zmiany koloru i wszystko pięknie śmiga. Dziękuję raz jeszcze Jupraw


.images-1 img, .images-2 img, .images-3 img{border:5px solid #4e4e4e;}
.images-1 img:hover, .images-2 img:hover, .images-3 img:hover{border-color:#71582e;} 

Stj

Avatar: Stj

2018-04-21 16:17

Witam.
Może odświeżę kotleta ale zapytam. Nie mogę nigdzie na forum znaleźć rozwiązania problemu. zainstalowałem galerię według @euphoria-art i niby wszystko jest ok poza chrome. IE, FIrefox wyświetlają ok ale w Chrome wyświetlane zdjęcie w lightbox jest przesunięte w dół. w czym problem?
Bardzo proszę o podpowiedź ewentualnie link do tematu.
Pozdrawiam serdecznie.
Stasiek

Quick.Cms 6.5 free

euphoria-art

Avatar: euphoria-art

2018-04-21 23:01

Podaj adres trony, spróbuje pomóc.

Stj

Avatar: Stj

2018-04-22 09:46

Witaj.
http://wedkomania.cba.pl/
Oczywiście nadmienię że jestem laikiem. Quick jest na tyle fajnym narzędziem że, ktoś taki jak ja może testować i uczyć się bezkarnie na udostępnionym za free przez Open Solution skrypcie a wsparcie forum jest naprawdę świetne.

Quick.Cms 6.5 free

euphoria-art

Avatar: euphoria-art

2018-04-22 11:00

u mnie wyświetla się ok - http://obrazyolejne.cba.pl/
musiałeś coś źle zainstalować, spróbuj jeszcze raz na czystej wersji.

POZIOMA GALERIA ZDJĘĆ
----------------------------------------
1) w templates/default/style.css
zamień 2 bloki:

/* list global */
.images-1, .images-2{list-style:none;}
.images-1 li, .images-2 li{margin:0 0 15px 0;background:inherit;text-align:center;}
.images-1 p, .images-2 p{max-width:250px;margin:0 auto;color:#0093dd;font-size:0.875em;}
/* list custom */
.images-1{clear:left;float:left;margin:9px 20px 0 0;}
.images-2{clear:right;float:right;margin:8px 0 0 15px;}

na te:

/* list global */
.images-1, .images-2, .images-3{list-style:none;}
.images-1 li, .images-2 li, .images-3 li{margin:0 0 15px 0;background:inherit;text-align:center;}
.images-1 p, .images-2 p, .images-3 p{max-width:250px;margin:0 auto;color:#0093dd;font-size:0.875em;}
/* list custom */
.images-1{clear:left;float:left;margin:9px 20px 0 0;}
.images-2{clear:right;float:right;margin:8px 0 0 15px;}
.images-3{float:left;margin:10px 0 15px 5px;}
.images-3 li{float:left;margin:8px;height:123px;width:123px;}

Uwaga!: w zależności od szerokości strony i wielkości ikonek zdjęć należy regulować dwiema wielkościami: width i height.

2) w templates/default/page.php
po:
echo $oFile->listFiles( $aData['iPage'] ); // display files included to the page
dodać:
echo $oFile->listImages( $aData['iPage'], Array( 'iType' => 3 ) ); // displaying images with type: gallery


3) w database/config.php
linię:
$config['images_locations'] = Array( 1 => 'Lewa strona', 2 => 'Prawa strona', 0 => 'Brak' ); // domyślna wartość: 1 => 'Lewa', 2 => 'Prawa', 0 => 'Brak'
zmienić na:
$config['images_locations'] = Array( 1 => 'Lewa strona', 2 => 'Prawa strona', 3 => 'Galeria', 0 => 'Tylko lista' ); // domyślna wartość: 1 => 'Lewa', 2 => 'Prawa', 3 => 'Galeria', 0 => 'Tylko lista'
--------------------------------------
KONIEC!

Stj

Avatar: Stj

2018-04-22 11:33

"2) w templates/default/page.php
po:
echo $oFile->listFiles( $aData['iPage'] ); // display files included to the page
dodać:
echo $oFile->listImages( $aData['iPage'], Array( 'iType' => 3 ) ); // displaying images with type: gallery"

i tutaj pytanie, czy po:
echo $oFile->listImages( $aData['iPage'], Array( 'iType' => 1 ) ); // displaying images with type: left
echo $oFile->listImages( $aData['iPage'], Array( 'iType' => 2 ) ); // displaying images with type: right
czy ma to duże znaczenie?

Quick.Cms 6.5 free

Stj

Avatar: Stj

2018-04-22 12:25

Dziękuję za pomoc. Zrobiłem w sposób o który pytałem w page.php i jest wszystko ok.
Jeszcze raz dziękuję za zainteresowanie i poświęcony czas.
Pozdrawiam.

Quick.Cms 6.5 free

Stj

Avatar: Stj

2018-05-15 17:49

Hmm... Nie kumam. Znowu mi się rozjechało po modyfikacjach. W IE oraz Firefox jest ok a w Chrome i Operze się rozjeżdża.
Pomoże ktoś?
http://weselenapodhalu.cba.pl/?okiem-marioli

Quick.Cms 6.5 free

szymaniukjerzy

Avatar: szymaniukjerzy

2018-05-16 07:51

Nic ci się nie rozjeżdża. Odśwież przeglądarki. Jest wszystko OK.

Jerzy

Stj

Avatar: Stj

2018-05-16 10:11

@szymaniukjerzy, zdjęcie w lightbox uciekają mi na dół w Chrome i Operze. Nie wiem o co chodzi. W IE i Firefox jest ok.
Czyściłem pamięć przeglądarek i nic. ctrl+F5 i nic :-(

Quick.Cms 6.5 free

selekcjoner

Avatar: selekcjoner

2018-05-16 14:30

Obstawiam reklamy u góry strony - był już kiedyś temat na forum jeśli chodzi o darmowe hostingi.
Albo źle zapisujesz pliki - powinno być ustawione w edytorze UTF-8 bez BOM
masz jakiś dziwny znak na początku strony (nad tekstem "Jeśli jesteś właścicielem " )

mcbuba

Avatar: mcbuba

2019-08-18 14:44

Witam

Szukam pomocy w utworzeniu galeri w wersji 6.6 Free. Troche inny kod jest w style.css :

/* IMAGES STYLES */
/* global */
#content li img{max-width:70vw;box-shadow:0 0 4px rgba(100,100,100,0.4);}
#content li img:hover{opacity:0.8;}
ul[class*='images-']{list-style:none;}
ul[class*='images-'li{margin:0 0 1rem 0;background:inherit;text-align:center;}
ul[class*='images-'p{max-width:250px;margin:0 auto;color:#0093dd;font-size:0.875em;}
ul[class*="images-"img{max-width:70vw;box-shadow:0 0 4px rgba(100,100,100,0.4);}
ul[class*="images-"img:hover{opacity:0.8;}
div.content .images-gallery{padding:0;}
/* list custom -column images */
.images-1{clear:left;float:left;margin:.5rem 1.5rem 0 0;}
.
images-2{clear:right;float:right;margin:.5rem 0 0 1rem;}
/* list custom -column images */
.images-3{clear:both;display:flex;flex-flow:row wrap;justify-content:space-between;}
.
images-3 li{flex:1 0 auto;padding:.3rem 2rem;}
/* @media screen and (min-width:960px){ .images-3 li{flex:0 0 25%;} } */ /* - if you want to set static number of columns */



Proszę o pomoc.

Quick.Cms 6.6 Free

mcbuba

Avatar: mcbuba

2019-08-18 15:12

PRzepraszam. w wersji 6.6 galleria działa, jedank źle wyświetla obrazki po kliknięciu i powiększeniu. Mianowicie, zamiast wyświetlić na środku strony. Wyświetla na dole i niepełne.

Quick.Cms 6.6 Free

Do góry
o nas | kontakt