ouvrir élargir / arrière près de la taille d'origine une série de boîtes avec img fondu
-
27-10-2019 - |
Question
J'ai une série de boîtes cliquables. Je dois être en mesure d'étendre les boîtes et cacher son img. Je dois aussi pouvoir fermer précédente a ouvert une prenant à sa hauteur d'origine et la largeur définie en fondu de retour dans son img. charges .info
contenu 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>
Le css, je ne sais pas la hauteur.
.box {
width: 230px;
height: auto;
}
.info {
height: auto;
width: auto;
}
J'ai essayé
$(".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'));
});
});
La solution 3
Ceci est mon code final qui fonctionne:
$(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);
});
});
});
};
});
});
});
Autres conseils
Il y avait quelques erreurs de syntaxe, comme @Diodeus a mentionné. Vous devriez toujours utiliser un débogueur premier à savoir.
Vous avez également if(box.hasClass(".opened"))
ce qui est faux (vous ne devez pas ajouter un point avant la classe il). Vous avez également box.addClass('opened');
juste avant que if
, qui brise la fonctionnalité (vous devez ajouter / supprimer la classe lorsque vous afficher / masquer le contenu, nulle part ailleurs).
Est-ce que vous cherchez?
$(".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");
};
});
});