Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

caioangarten

Álbum de fotografia com categoria

Por , em Desenvolvimento frontend

Recommended Posts

caioangarten    1

caioangarten
Postado

Eu não encontrei nada do tipo aqui então lá vai:

 

como posso colocar em uma página todas as minhas fotografias, ao selecionar uma categoria, ele "filtra" e só mostra essas da categoria selecionada.

 

Imagino que com JQuery eu consiga mas não achei nada

 

Desde já obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

kaiquemix    1

kaiquemix
Postado

Primeiramente você vai precisar de ter o jquery no script (no meu caso eu usei todas elas para alterar coisas também)

 <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.mixitup.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript" src="js/app.js"></script>

 

na escolha da categoria poderia ficar assim: (as categorias são "all" "visu" "web" "pape" "comu" "digi" você pode escolher qualquer nome e alterar só lembre-se de alterar nos quadros la de baixo também)

<ul class="nav nav-pills">
                    <li class="filter" data-filter="all">
                        <a href="#noAction">TODOS</a>
                    </li>
                    <li class="filter" data-filter="visu">
                        <a href="#noAction">IDENTIDADE VISUAL</a>
                    </li>
                    <li class="filter" data-filter="web">
                        <a href="#noAction">DESENVOLVIMENTO WEB</a>
                    </li>
                    <li class="filter" data-filter="pape">
                        <a href="#noAction">PAPELARIA E DIAGRAMAÇÃO</a>
                    </li>
                    <li class="filter" data-filter="comu">
                        <a href="#noAction">COMUNICAÇÃO VISUAL</a>
                    </li>
                    <li class="filter" data-filter="digi">
                        <a href="#noAction">MARKETING DIGITAL</a>
                    </li>
</ul>

Nos quadros com a fotografia poderia ficar assim: (as categorias são "all" "visu" "web" "pape" "comu" "digi" você pode escolher qualquer nome e alterar só lembre-se de alterar nas categorias la de cima também)

 

o MARK é só para dar um efeito Preto nele.

<ul id="portfolio-grid" class="thumbnails row">
                        <li class="span4 mix visu">
                            <div class="thumbnail">
                                <img src="images/port/01.png" alt="project 1">
                                <a href="#" class="more show_hide" >
                                </a>
                            </div>
                        </li>
                        <li class="span4 mix web">
                            <div class="thumbnail">
                                 <a href='javascript:;' onclick="abrirForm();">
                                <img src="images/port/02.png" alt="project 2">
                                
                                <div class="mask"></div></a>
                            </div>
                        </li>
                        <li class="span4 mix pape">
                            <div class="thumbnail">
                                <a href='javascript:;' onclick="abrirForm2();">
                                <img src="images/port/06.png" alt="project 2">
                                
                                <div class="mask"></div></a>
                            </div>
                        </li>
                        <li class="span4 mix comu">
                            <div class="thumbnail">
                                <img src="images/port/04.png" alt="project 3">
                                <div class="mask"></div>
                            </div>
                        </li>
                        <li class="span4 mix digi">
                            <div class="thumbnail">
                                <img src="images/port/05.png" alt="project 3">
                                <a href="#single-project" class="more show_hide" rel="#slidingDiv2">
                                    <i class="icon-plus"></i>
                                </a>
                                <div class="mask"></div>
                            </div>
                        </li>

Aqui está um css só para ter uma visualização melhor:

.navbar {
    background: #181A1C;
    margin-bottom:0;
    min-height:70px;
}

.navbar-fixed-top {
    min-height:60px;
    height:60px;
    padding-top:0;
}
.navbar-inner {
    background: #181A1C;
    border-radius:0;
    filter: none;
    border: none;
    box-shadow: none;
}
.navbar .brand img {
    width:120px;
    height:40px;
}
.navbar .nav > li > a {
    text-transform:uppercase;
    line-height: auto;
    vertical-align: middle;
    margin:10px 3px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border: 1px solid #181A1C;
    box-shadow: none;
    font-size:15px;
    text-shadow: none;
    color: #fff;
    transition: border-color 1s ease;
}
.navbar .nav > li:hover> a, .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    border: 1px solid #FECE1A;
    color: #fff;
    background-color: #181A1C;
    transition: border-color 1s ease;
}
.nav-pills {
    padding-top: 20px;
    padding-bottom: 50px;
}
.nav-pills > li > a {
        background: #878787;
    -moz-border-radius: 0;
    padding-left: 20px;
    margin-right: 12px;
    padding-right: 21px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: #fff;
    font-size: 13px;
    font-family: 'OpenSans-Semibold';
}
.nav-pills > li > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus {
   background: #4d8984;
    color: #fff;
}
.navbar .btn-navbar:hover, .navbar .btn-navbar {
    border-radius:0;
    background:#FECE1A;
    color: #000;
}
.nav-tabs > li, .nav-pills > li {
    float: left;
}
.thumbnail {
width: 224.9px;
height: 225px;
padding: 0;
overflow: hidden;
position: relative;
border: 0;
border-radius: 0;
box-shadow: none;
text-align: center;
margin-right: -5px;
margin-top: -4px;
}
.thumbnail .more {
display:block;
z-index:4;
position:absolute;
top:-100px;
left:50%;
margin:0 auto;
;
width:80px;
height:80px;
font-size:40px;
color:#fff;
text-decoration:none;
line-height: 70px;
text-align: center;
}
.thumbnail:hover .more {
top:40%;
margin-top:-40px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3 s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.thumbnail h3,
.thumbnail p {
margin:0;
padding:0;
position:relative;
z-index:4;
}
.thumbnail h3 {
color: #FECE1A;
margin-top:10px;
font-size:20px;
}
.thumbnail > p {
padding-bottom:20px;
}
.thumbnail .mask {
opacity: 0.85;
filter: alpha(opacity=85);
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: rgba(24, 26, 28, 0.63);
position: absolute;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2 s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.thumbnail:hover .mask {
top:0;
}
/*
3.2 Portfolio
***************************************/
.single-project {
margin-bottom:30px;
background:#181A1C;
}
.single-project img {
width:100%;
}
.project-description {
padding-right:20px;
}
.project-description p {
padding-left:0;
}
.project-title {
margin-top:15px;
margin-bottom:15px;
border-bottom:1px solid #FECE1A;
}
.project-title h3 {
float:left;
margin-top:0;
padding:0;
width:80%;
}
.project-title .close {
color: #FECE1A;
margin-top:10px;
}
.project-info span, .project-title h3 {
color:#FECE1A;
}
.project-info {
font-weight:100;
padding:10px 0;
}
.project-info span {
width: 80px;
display: inline-block;
}
.project-info div {
margin-bottom:5px;
}
.close {
float: right;
width: 40px;
height: 40px;
text-align: center;
}
#portfolio-grid .mix {
opacity: 0;
display: none;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito