Jquery grid expand/collapse div siblings gallery

Работа в галерее, где есть сетка из 4 изображений, и когда вы нажимаете на одно изображение, это же изображение расширяется, и рядом с ним появляется другое разделение с некоторым содержимым, перемещение остальные изображения вниз.Jquery grid expand/collapse div siblings gallery

Мой главный вопрос: Я не уверен, как сделать столбец номер 4 не двигаться, когда появится новое подразделение. Я играл с позициями css без успеха

Он чувствует себя довольно солидно, но, возможно, я подхожу к нему неправильно, было бы легче с Isotope?

Эта скрипка является то, что я придумал:

http://jsfiddle.net/jupago/xq279/32/

$(".photo").click(function(e) { 
    if($(this).prev().hasClass("open")) { 
     $(this).prev().removeClass("open").addClass("closed"); 
      } 
    else { 
     // if other menus are open remove open class and add closed 
     $(this).siblings().prev().removeClass("open").addClass("closed"); 
     $(this).prev().removeClass("closed").addClass("open"); 
    } 
    if($(this).hasClass("opaque")) { 
     $(this).removeClass("opaque"); 
     } 
    else { 
     // change opacity of selected image 
     $(this).siblings().removeClass("opaque"); 
     $(this).addClass("opaque"); 
    } 
});

источник

2013-11-22 Jupago

Так что происходит это ваш текстовый блок 4 кладется в перед вашей картине 4. Просто поместите текстовое поле после того, как на картинке, а не раньше, и вы должны будь умницей. – JeremyS

Спасибо @JeremyS, это то, что я пытаюсь понять, так как я хотел упростить, насколько это возможно, я все называю предыдущим div, знаете ли вы, как бы у меня только четвертый столбец вызывать следующий div? – Jupago

Позвольте мне взглянуть, с другой стороны, если вы дали четвёртый текст шириной 80 пикселей, это важно. Я посмотрю, как будет вызываться 4-й ящик после vs. – JeremyS

Я возился немного и придумал это: http://jsfiddle.net/S3QpB/

HTML: Я переехал дивы окно для строки 4 после и дал им идентификаторы, чтобы я мог протестировать их в javascript.

<div class="wrapper"> 
<div class="gallerybox column1">TEXT for image 1</div> 
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div> 

<div class="gallerybox column2">TEXT for image 2</div> 
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div> 

<div class="gallerybox column3">TEXT for image 3</div> 
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div> 


<div class="photo" id="box-4"><img src="http://goo.gl/VEEw3z"/></div> 
<div class="gallerybox column4">TEXT for image 4</div>  

<div class="gallerybox column1">TEXT for image 1</div> 
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div> 

<div class="gallerybox column2">TEXT for image 2</div> 
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div> 

<div class="gallerybox column3">TEXT for image 3</div> 
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div> 

<div class="photo" id="box-4-2"><img src="http://goo.gl/VEEw3z"/></div> 
<div class="gallerybox column4">TEXT for image 4</div>   

<div class="gallerybox column1">TEXT for image 1</div> 
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div> 

<div class="gallerybox column2">TEXT for image 2</div> 
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div> 

<div class="gallerybox column3">TEXT for image 3</div> 
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div> 

<div class="photo" id="box-4-3"><img src="http://goo.gl/VEEw3z"/></div> 
<div class="gallerybox column4">TEXT for image 4</div>

JavaScript:

$(".photo").click(function(e) { 
if (($(this).attr('id') !== "box-4") && ($(this).attr('id') !== "box-4-2") && ($(this).attr('id') !== "box-4-3")) { 
    if($(this).prev().hasClass("open")) { 

     $(this).prev().removeClass("open").addClass("closed"); 

     } 

    else { 

     // if other menus are open remove open class and add closed 

     $(this).siblings().prev().removeClass("open").addClass("closed"); 

     $(this).prev().removeClass("closed").addClass("open"); 

    } 

    if($(this).hasClass("opaque")) { 

     $(this).removeClass("opaque"); 

     } 

    else { 

     // if other menus are open remove open class and add closed 

     $(this).siblings().removeClass("opaque"); 

     $(this).addClass("opaque"); 

    } 
} else { 
    if($(this).next().hasClass("open")) { 
     $(this).next().removeClass("open").addClass("closed"); 
     } 
    else { 
    $(this).siblings().next().removeClass("open").addClass("closed"); 
     $(this).next().removeClass("closed").addClass("open"); 
    } 
    if($(this).hasClass("opaque")) { 
     $(this).removeClass("opaque"); 
     } 
    else { 
     // if other menus are open remove open class and add closed 
     $(this).siblings().removeClass("opaque"); 
     $(this).addClass("opaque"); 
    } 
} 
});

источник

2013-11-22 21:22:52 JeremyS

спасибо !!!!! Я покажу эту версию вместе с этим: jsfiddle.net/jupago/S4q8L и посмотрим, какой из них звучит как лучший выбор, изображения в два раза больше, поэтому постоянная перетасовка может раздражать. еще раз спасибо!!!! – Jupago

Jquery grid expand/collapse div siblings gallery

ответ

Смежные вопросы