abrir expandir / fechar de volta para os formatos de originais de uma série de caixas com img desvanecimento
-
27-10-2019 - |
Pergunta
Eu tenho uma série de caixas clicáveis. Eu preciso ser capaz de expandir as caixas e esconder o seu img. Eu também preciso ser capaz de fechamento anterior abriu um tomá-lo de volta à sua altura original e definiu largura, enquanto desaparecendo de volta em seu img. cargas .info
conteúdo 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>
O css, eu não sei a altura.
.box {
width: 230px;
height: auto;
}
.info {
height: auto;
width: auto;
}
Eu tentei
$(".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'));
});
});
Solução 3
Este é meu 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);
});
});
});
};
});
});
});
Outras dicas
Houve alguns erros de sintaxe, como @Diodeus mencionou. Você deve sempre usar um depurador primeiro a descobrir.
Você também teve if(box.hasClass(".opened"))
que é errado (você não deve adicionar um ponto antes da aula lá). Você também teve box.addClass('opened');
pouco antes que if
, que quebra a funcionalidade (você deve adicionar / remover a classe quando você mostrar / ocultar o conteúdo, em nenhum outro lugar).
É isso que você estava procurando?
$(".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");
};
});
});