Lightbox problem

**volkantr19** · 09-09-2013, 11:16 AM

Hi everybody;

I use lightbox in my website but i have small problem.
I have photos gallery with filter(for example me,my family,my school,etc.)...If i select one item in the filter (for example my family) coming only my family photos.The problem is stay all photos on the screen (but they are in opacity)...
I only want,if i select one item (for example my family),staying only my family photos,not another photos.

This is my exaple webpage: http://ornek7.antalyabalikcilik.com.tr/#/portfolio

Thank you for your help in advance..

**jscheuer1** · 09-09-2013, 07:00 PM

Using a text only editor like NotePad, add the highlighted as shown to the ornek7.antalyabalikcilik.com.tr/css/style.css file (around line #870):

Code:

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1), .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2), .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) {
 opacity: 0.1;
 -webkit-transform: scale(0.5);
 -moz-transform: scale(0.5);
 -o-transform: scale(0.5);
 -ms-transform: scale(0.5);
 transform: scale(0.5);
 display: none;
}

But, I think you would be happier with:

Code:

.ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1), .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2), .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) {
 opacity: 0.1;
 -webkit-transform: scale(0.5);
 -moz-transform: scale(0.5);
 -o-transform: scale(0.5);
 -ms-transform: scale(0.5);
 transform: scale(0.5);
 visibility: hidden;
}

Either way, the unseen image trigger's larger images are still a part of the lightbox gallery group and their larger images will be seen when using the lightbox's next and previous arrows. If you want to change that, you will need a different lightbox script (or an edit to the current version) and javascript code to change the data-rel attributes of the items you don't want appearing in a given group. But that's not css, that's javascript.