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;} 

Do góry
o nas | kontakt