-
data publikacji: 26.11.2007
Miniaturki z opisem
kategoria: Skrypty client-side, Tutoriale, Webmaster, XHTML/CSS autor: palmiakStanąłem ostatnio przed problemem dotyczącym stworzenia galerii zdjęć. Wszystko miało być zrobione beztabelkowo oraz zawierać komentarze. Wszystko było fajnie dopóki wszystkie komentarze oraz miniaturki były tej samej wielkości.
Wielkość obrazków
Zamiast przeskalowywać, doszedłem do wniosku, ze lepiej będzie jeśli będziemy wycinać fragment obrazka. Dzięki temu będziemy mieć pewność, ze niezależnie od wielkość obrazka, nasza miniaturka będzie zawsze tej samej wielkości.
Spójrzmy na przykład. Oba obrazki mają różną wielkość, ale przez to, że pokażemy tylko ich fragment miniaturki będą wyglądało jakby były takie same.
Nam "wycinać" będzie wielkość
<li>Żeby to zrobić będziemy umieszczać nasze obrazki jako tło
<li>i wyśrodkowywać.Komentarze
Wyjścia były dwa. Albo będziemy skracać komentarz do okreśonej liczby znaków/słów albo zrobimy tak, ze komentarz będzie pokazywał się na miniaturce, dzięki czemu jego wielkość (w rozsądnych granicach oczywiście) nie ma wpływu na wielkość naszego
<li>z miniaturką. Żeby to jeszcze jeszcze przyozdobić uzyjemy jQuery.Podsumowanie
W tym momencie mamy już pomysł jak zrobić, żeby miniaturki były równe. A w takiej sytuacji nadanie
<li>w CSSfloat:left;załatwi sprawę.No to piszemy
Jako, że nasza galeria to nic innego jak lista nieuporządkowana to kod wygląda następująco:
<ul>
<li class="pierwszy"><a href="#"><span>Lorem ipsum dolor sit amet consectetuer adipiscing elit.</span></a></li>
<li class="drugi"><a href="#"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></a></li>
<li class="trzeci"><a href="#"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></a></li>
</ul>W
<span>znajdują się komentarze obrazków. Same zaś obrazki będą tłem<li>, więc będą podane w stylu. W<a>oczywiście podajemy link do dużego obrazka.Teraz czas na CSS
* {
margin:0;
padding:0;
}body {
font:11px verdana, sans-seriff;
background:black;
}ul {
list-style:none;
}li {
width:200px;
height:150px;
border:2px white solid;
background:white 50% 50%;
float:left;
margin:5px;
position:relative;
}span {
display:block;
opacity:0.9;
background:black;
color:white;
padding:3%;
width:94%;
position:absolute;
bottom:0;
}.pierwszy, .drugi, .trzeci {
background-image:url(ping.jpg);
}ul a {
display:block;
width:100%;
height:100%;
}Mam nadzieję, że ten fragment jest dość jasny. Jeśli macie wątpliwości po co jakiś fragment stylu to po prostu go usuncie i zobaczcie co się stanie.
Pozostaje nam jQuery. Zadaniem tego skrypciku jest pokazywanie opisu w momencie gdy ktoś najedzie na miniaturkę.
$(document).ready(function() {
$("span").hide();$("li a").hover(function(){
$(this).children("span").fadeIn("fast");
},function(){
$(this).children("span").fadeOut("fast");
});});
Drobny szlifik
W pewnych sytuacjach, np gdy nazwy obrazków trzymamy w bazie danych i z pomocą jakiegoś skryptu chcemy te obrazki pokazać, nadawanie klas kolejnym
<li>jest dość kiepskim pomysłem. O wiele prościej wtedy zamiast pisać<li class="jakas_nazwa">napisać<li style="background-image:url(nazwa_obrazka);">.Działające demo możecie zobaczyć tutaj.
W razie wątpliwości nie bójcie sie pisać na grafikarto.pl w odpowiednim temacie.
-
Zobacz podobne wpisy:
- None Found
-
6 Responses to “Miniaturki z opisem”
Leave a Reply
Komentarze
Kategorie
Top 10
alan27pbll: Query_posts, czyli jak ujarzmić loopa część 1.
Michał: Inspirujące strony www: wrzesień 2010
czi: Gravatar, czyli jak mieć globalnego avatara
learn italian online: Query_posts, czyli jak ujarzmić loopa część 1.
hotelpalermo: Jak poprawnie osadzić Flasha w kodzie (X)HTML strony?
Windscreen: Inspirujące strony www: wrzesień 2010
EMAAR MGF GURGAON: Query_posts, czyli jak ujarzmić loopa część 1.
Tomek: Cforms, czyli zaawansowane formularze w Wordpressie
- CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
- Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
- Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
- Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
- Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
- Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
- Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
- Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
- Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
- Skrypty client-side
- Skrypty server-side
- Tutoriale
- Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
- Wieczór z Open Source
- Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
- Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
- XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.
Najnowsze newsy
Wieczór z Open Source 2010
Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej
Grafart.org i WACOM zapraszają na konkursy!
Witam!
Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej
Zapraszamy na forum graficzne Graffika.pl
Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej
Polecane strony
- No bookmarks avaliable.
[...] zastosowanie obu funkcji pokazałem we wcześniejszym tutorialu dotyczącym miniaturek z opisami. Tam po najechaniu na obrazek za pomocą fadeIn pokazywał się opis, a po zjechaniu z obrazka [...]
[...] Stanąłem ostatnio przed problemem dotyczącym stworzenia galerii zdjęć. Wszystko miało być zrobione beztabelkowo oraz zawierać komentarze. Wszystko było fajnie dopóki wszystkie komentarze oraz miniaturki były tej samej wielkości. (more…) [...]
“doszedłem do wniozku”
no cóż… jedyne co mogę powiedzieć to, ze “z” było blisko “s”, albo… nie wiem, nie mam innych głupich wytłumaczeń. Ot literówka, dzięki za wskazanie.
[...] Efekt ten został zapożyczony z tej samej strony co poprzedni, jedynie drobnie zmodyfikowany. Div z opisem ukazującym się nam po najechaniu kursorem na dany obrazek posiada ustawioną przezroczystość 80% w kaskadowych arkuszach styli (filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8;). W połączeniu z tym skryptem nie działa jednak w przeglądarce Internet Explorer. [...]
[...] Miniaturki z opisem [...]