Modal com cycle

by Jader Wagner

HTML

<script src="http://pedrowebdesign.hol.es/damaso/js/bootstrap.min.js"></script>
<script src="http://pedrowebdesign.hol.es/damaso/js/jcycle.js"></script>
<h1>DESTAQUES</h1> 
<div class="row destq">
    <div class="col-md-4 featured"> <a href="#" class="client" data-folder="client01"></a>

    </div>
    <div class="col-md-4 featured"> <a href="#" class="client" data-folder="client02"></a>

    </div>
    <div class="col-md-4 featured"> <a href="#" class="client" data-folder="client03"></a>

    </div>
</div>


        <!-- Aqui é onde o efeito estilo lightbox acontece! :D -->
        <div class="filter">
          <!-- Botão que desfaz o efeito lightbox e fecha o modal -->
          <a href="#" id="close-btn"></a>

          <!-- Botões de controle próximo-anterior -->
          <div id="prev"></div>
          <div id="next"></div>

          <div class="modal">
            <!-- Pelamor de  --> 
            <!-- Pelamor de Zeus! Não coloque nada aqui dentro. O conteúdo
                 é criado automaticamente via AJAX --> 
          </div>
        </div>

CSS

* { padding:0; margin:0; list-style:none; font-family:"Muli"; }

html, body {
	min-height: 100%;
	width: 100%;
}

h1{font-size:1.3em; margin:0; padding:0; color:black; font-weight:bold; text-align:center;}
h2{font-size:1.2em; margin:0; padding:0; color:black;   text-align:center;}
p{font-size:0.900em; color:white;}
.container{width:920px !important;}

.active .filter {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0, 0, 0, .8);
	z-index: 100;
	line-height: 100%;
}

.active .filter #close-btn {
	width: 50px;
	height: 50px;
	background-color: rgba(255, 255, 255, .8);
	display: block;
	position: absolute;
	z-index: 101;
	top: 0;
	right: 0;
}

.active .filter #close-btn:before {
	content: 'X';
	position: absolute;
	display: block;
	margin: 0 auto;
}

.active .filter .modal {
	display: none;
	margin: 0 auto;
	position: absolute;
	background-color: transparent;
	width: auto;
	height: auto;
	z-index: 100;
}

.active .modal img {
	max-width: 90%;
	max-height: 80%;
	display: block;
	margin: auto;
	border-radius: 5px;
	box-shadow: 0 0 10px #CCC;
	padding: 5px;
	position: absolute;
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0;
}

.active #prev {
	width: 50px;
	height: 150px;
	background-color: rgba(255, 255, 255, .6);
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY(-50%);
	z-index: 101;
	transition-property: background-color;
	transition-duration: .8s;
}

.active #next {
	width: 50px;
	height: 150px;
	background-color: rgba(255, 255, 255, .6);
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY(-50%);
	z-index: 101;
	right: 0;
	transition-property: background-color;
	transition-duration: .8s;
}

.active #prev:after, .active #next:after {
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.5em
}

.active #prev:after {
	content: '<';
	left: 10px;
}

.active #next:after {
	content: '>';
	right: 10px;
}

.active #prev:hover, .active #next:hover {
	cursor:...

JavaScript

$('.featured .client').on("click", function (e) {
    e.preventDefault();
    $('body').addClass('active');
    $('.filter, .modal').fadeIn();

    $.ajax({
        method: 'POST',
        url: '/echo/html/',
        data: {
            html: "<img src='http://pedrowebdesign.hol.es/damaso/client_images/" + $(this).data('folder') + "/photo1.jpg'/><br><img src='http://pedrowebdesign.hol.es/damaso/client_images/" + $(this).data('folder') + "/photo2.jpg'/><br><img src='http://pedrowebdesign.hol.es/damaso/client_images/" + $(this).data('folder') + "/photo3.jpg'/><br><img src='http://pedrowebdesign.hol.es/damaso/client_images/" + $(this).data('folder') + "/photo4.jpg'/><br>",
            delay: 1
        },
        success: function (data) {
            $('.modal').html(data);
            $('.modal').cycle({
                'next': '#next',
                'prev': '#prev'
            });
        }
    });
});

$('#close-btn').on("click",function (e) {
    e.preventDefault();
    $('.filter, .modal').fadeOut(400, function () {
        $('.modal').cycle('destroy').html('');
        $('body').removeClass('active');
    });
});