abrir expandir / cerrar de nuevo a tamaños originales una serie de cajas con img fade
-
27-10-2019 - |
Pregunta
Tengo una serie de cuadros en los que se puede hacer clic.Necesito poder expandir los cuadros y ocultar su img.También necesito poder cerrar uno abierto anteriormente llevándolo a su altura original y ancho definido mientras se desvanece en su img..info
carga contenido ajax
<div class="box">
<img src="#" />
<div class="info"></div>
</div>
<div class="box">
<img src="#" />
<div class="info">Ajax load content</div>
</div>
<div class="box">
<img src="#" />
<div class="info">Ajax loads content</div>
</div>
El CSS, no sé la altura.
.box {
width: 230px;
height: auto;
}
.info {
height: auto;
width: auto;
}
Lo intenté
$(".box").each(function(){
var box = $(this);
box.data('height', $(this).height());
box.click(function(){
box.addClass("opened");
if(box.hasClass("opened"){
$("img", this).fadeOut("slow", function(){
box.css("width", "600");
box.css("height", "500");
box.removeClass("opened");
});
} else {
$("img", this).fadeIn("slow");
box.width(230);
box.height(box.data('height'));
});
});
Solución 3
Este es mi código final que funciona:
$(function(){
//run the function for all boxes
$(".box").each(function () {
var item = $(this);
var thumb = $("a", item);
var infoBox = $(".info", item);
thumb.click(function(e) {
e.preventDefault();
$(".box").removeClass("opened");
$(".info").empty();
$(".box a").fadeIn("slow");
$(".info").css({
"width": "auto",
"height": "auto"
});
$(".box a").css("width", "230");
$(".box a").css("height", "auto");
$(".box").css("width", "230");
$(".box").css("height", "auto");
item.addClass("opened");
if (item.hasClass("opened")) {
var url = this.href;
thumb.fadeOut("slow");
infoBox.css({
"visibility": "visible",
"height": "auto"
});
infoBox.load(url, function () {
var newHeight = infoBox.outerHeight(true);
$(".readMore", item).click(function (e) {
var selector = $(this).attr('data-filter-all');
$('#container').isotope({
filter: selector
});
$('#container').isotope('reloadItems');
return false;
});
$('<a href="#" class="closeBox">Close</a>"').appendTo(infoBox).click(function (e) {
e.preventDefault();
$("html, body").animate({scrollTop: 0}, 500);
$('#container').isotope('reLayout');
});
item.animate({
"width": "692",
"height": newHeight
}, 300);
thumb.animate({
"width": "692",
"height": newHeight
}, 300);
infoBox.animate({width: 692, height: newHeight}, function () {
$('#container').isotope('reLayout', function () {
Shadowbox.setup();
item.removeClass("loading");
infoBox.css({
"visibility": "visible"
});
var videoSpan = infoBox.find("span.video");
iframe = $('<iframe/>', {
'frameborder': 0,
'class': 'tide',
'width': '692',
'height': '389',
'src': 'http://player.vimeo.com/video/' + videoSpan.data("vimeoid") + '?autoplay=0&api=1'
});
videoSpan.replaceWith(iframe);
});
});
});
};
});
});
});
Otros consejos
Hubo algunos errores de sintaxis, como lo mencionó @Diodeus.Siempre debe usar un depurador primero para averiguarlo.
También tenías if(box.hasClass(".opened"))
, que es incorrecto (no debes agregar un punto antes de la clase).También tenía box.addClass('opened');
justo antes de if
, que rompe la funcionalidad (debe agregar / eliminar la clase cuando muestra / oculta el contenido, en ningún otro lugar).
¿Es esto lo que buscaba?
$(".box").each(function(){
var box = $(this);
box.data('height', $(this).height());
box.click(function(){
if(!box.hasClass("opened")){
$("img", box).fadeOut("slow", function(){
box.css("width", "600");
box.css("height", "500");
box.removeClass("opened");
});
} else {
$("img", box).fadeIn("slow");
box.width(230);
box.height(box.data('height'));
box.addClass("opened");
}
});
});
$(".box").each(function(){
var box = $(this);
box.data('height', $(this).height());
box.click(function(){
if(box.hasClass("opened")){
$("img", box).fadeOut("slow", function(){
box.css({"width":"600","height":"500"});
box.removeClass("opened");
});
} else {
$("img", box).fadeIn("slow");
box.width(230);
box.height(box.data('height'));
box.addClass("opened");
};
});
});