Portfolio w prosty sposób

Demo:

Wizerunek w internecie to bardzo ważna sprawa. Jedną z podstawowych elementów każdej strony jest portfolio. Poniżej prezentuje pomysł na szybkie i ciekawe portfolio, które śmiało można wykorzystać na swojej stronie.

Krok 1 – tworzymy zawartość

Pierwszy krok to oczywiście struktura html z naszymi projektami. Warto zwrócić uwagę, że tylko w w jednym przypadku (ostatni element) posiada znacznik < a >. Jest to jedna z opcji, którą można wykorzystać do naszego portfolio. Zostanie opisana w kolejnych krokach. Należy zwrócić uwagę, że do każdego obrazka została ustawiona szerokość width=150px. Obrazek oczywiście jest większego rozmiaru, celowo został to zmniejszony a jego oryginalny rozmiar zostanie wyświetlony po kliknięciu.

<div class="ewd_portfolio">
	<div class="content">
	<img alt="example" title="Tworzymy interaktywne strony internetowe" src="pen.jpg" width="150px" />
	</div>
	
	<div class="content">
		<img alt="example" title="Tworzymy ciekawe strony internetowe" src="work.jpg" width="150px" />
	</div>
	
	<div class="content">
		<img alt="example" title="Tworzymy pluginy dla stron internetowych" src="button.jpg" width="150px" />
	</div>
	
	<div class="content">
		<img alt="example" title="Pomagamy w tworzeniu stron www" src="business.jpg" width="150px" />
	</div>
	
	<div class="content">
		<img alt="example" title="Robimy coś kreatywnego" src="city.jpg" width="150px" />
	</div>
	
	<div class="content">
		<img alt="example" title="Strony, które przyciągają" src="electro.jpg" width="150px" />
	</div>
	
	<div class="content">
		<img alt="example" title="Kreatywne tworzenie stron internetowych " src="pc.jpg" width="150px" />
	</div>
	
	<div class="content">
		<img alt="example" title="Tworzymy z pasją" src="table-office.jpg" width="150px" />
	</div>
	
	<div class="content">
		<a href="#" data-title="Eclipse 2014 &copy;" class="ewd_title ewd_top">
			<img alt="example" title="Tworzymy od podstaw" src="tools.jpg" width="150px" />
		</a>
	</div>
	
	<br style="clear:both;">
          <div class="ewd_portfolio_show">
          </div>
</div>

Krok 2 – style css

Standardowo już, aby nasze portfolio nabrało odpowiedniego wyglądu musimy dodać mu odpowiednie style.

.ewd_portfolio
{
	width:520px; 
	margin:0 auto; 
}
.ewd_portfolio .content 
{
	width:150px; 
	height:100px;
	float:left;
	margin:10px;
	overflow:hidden;
}
.ewd_portfolio:hover .content, .ewd_portfolio.active .content 
{
	opacity:0.4;
}
.ewd_portfolio .content:hover, .ewd_portfolio .content.current 
{
	opacity:1 !important;
	cursor:pointer;
}
.ewd_portfolio_show 
{	
	padding:7px;
}
.ewd_title.ewd_top:after 
{
    top: -3.5em;
}
.ewd_title.ewd_top:hover:after 
{
    top: 0;
}
.ewd_title:before, .ewd_title:after 
{
    content: '';
    position: absolute;
    text-align: center;
    transition: all .6s ease-in-out;
    width: 100%;
}
.ewd_title:after 
{
    background: rgba(221, 0, 85,.8);
    color: #fff;
    content: attr(data-title);
    overflow: hidden;
    padding: 7px 5px;
	left:0;
}
.ewd_title 
{
    position: relative;
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
}	

Nie ma co się zbytnie nad tym rozpisywać. Jeśli ktoś nie będzie używać znacznika < a > to może odpuścić style z klasą .ewd_title

Krok 3 – dodanie jQuery

Skrypt ten składa się jakby z dwóch elementów. Pierwszy konieczny do działania po kliknięciu na dany element wyciąga nazwę obrazka i wyświetla go pod elementami w oryginalnych rozmiarach. Drugi element skryptu dodaje klasę active do głównego kontenera oraz klasę current do aktualnie wybranego obrazka.

$('.ewd_portfolio .content').click(function() {
		
	$(this).addClass('current').siblings().removeClass('current');
	$(this).parent().addClass('active');		
	var tit = $(this).find('img[alt="example"]').attr('title');
	var src = $(this).find('img[alt="example"]').attr('src');
	$( ".ewd_portfolio_show" ).html("<h2>" + tit + "</h2><img src=" + src + " />");
});

Linia w naszym skrypcie:

var src = $(this).find('img[alt="example"]').attr('src');

odpowiada za wyciągnięcie źródła obrazka. Nasz znacznik img musi mieć znacznik alt=”example”

Podsumowanie

Nasz skrypt jest już gotowy, korzystając z wszystkich wyżej wymienionych elementów osiągniemy efekt jak wyżej w demo. Skrypt ten również bardzo dobrze będzie się nadawać do małej galerii, lub prezentacji kilku ilustracji.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code