apri espandi / chiudi torna alle dimensioni originali una serie di riquadri con img dissolvenza
-
27-10-2019 - |
Domanda
Ho una serie di caselle selezionabili.Devo essere in grado di espandere le caselle e nascondere la sua immagine.Devo anche essere in grado di chiudere uno aperto precedente riportandolo alla sua altezza originale e alla larghezza definita mentre si dissolve nella sua immagine..info
carica il contenuto 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>
Il css, non conosco l'altezza.
.box {
width: 230px;
height: auto;
}
.info {
height: auto;
width: auto;
}
Ho provato
$(".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'));
});
});
Soluzione 3
Questo è il mio codice finale che funziona:
$(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);
});
});
});
};
});
});
});
Altri suggerimenti
Si sono verificati alcuni errori di sintassi, come ha menzionato @Diodeus.Dovresti sempre usare prima un debugger per scoprirlo.
Avevi anche if(box.hasClass(".opened"))
che è sbagliato (non dovresti aggiungere un punto prima della classe lì).Avevi anche box.addClass('opened');
subito prima di quel if
, che interrompe la funzionalità (dovresti aggiungere / rimuovere la classe quando mostri / nascondi il contenuto, da nessun'altra parte).
È questo quello che stavi cercando?
$(".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");
};
});
});