Konrad Konrad - 4 months ago 7
Javascript Question

How swap all divs with each other

That is how my gallery looks like:
images gallery

I need javascript/jquery functions: "arrow_left()" and "arrow_right" for changing positions of divs with images (all divs with everything in middle). For example when I click on right arrow on "image 2", "image 2" should swap with "image 3" their possitions.
Below I present how swap "image 2" with "image 3" leaving "image 2" empty ("image 3" will be removed).

<script>
function arrow_right(id_number) {
var present_div = $('#' + id_number);
id_number = id_number + 1;
var next_div = $('#' + id_number);

$(present_div).replaceWith(next_div);
//$(next_div).replaceWith(present_div); <- doesn't work
}

function arrow_left(id_number) {
var present_div = $('#' + id_number);
id_number = id_number - 1;
var prev_div = $('#' + id_number);

$(present_div).replaceWith(prev_div);
//$(prev_div).replaceWith(present_div); <- doesn't work
}
</script>

<div id='ID_1' class='col-lg-4 col-md-6 portfolio-item'>
<div class='thumbnail'>
<div onclick='arrow_left(1);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
<div onclick='arrow_right(1);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
<img id='1' class='img-responsive' src='path/to/img'>
</div>
</div>
<div id='ID_2' class='col-lg-4 col-md-6 portfolio-item'>
<div class='thumbnail'>
<div onclick='arrow_left(2);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
<div onclick='arrow_right(2);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
<img id='2' class='img-responsive' src='path/to/img'>
</div>
</div>

<div class='clearfix visible-md-block'></div>

<div id='ID_3' class='col-lg-4 col-md-6 portfolio-item'>
<div class='thumbnail'>
<div onclick='arrow_left(3);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
<div onclick='arrow_right(3);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
<img id='3' class='img-responsive' src='path/to/img'>
</div>
</div>
<div class='clearfix visible-lg-block'></div>
<div id='ID_4' class='col-lg-4 col-md-6 portfolio-item'>
<div class='thumbnail'>
<div onclick='arrow_left(4);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
<div onclick='arrow_right(4);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
<img id='4' class='img-responsive' src='path/to/img'>
</div>
</div>

<div class='clearfix visible-md-block'></div>

<div id='ID_5' class='col-lg-4 col-md-6 portfolio-item'>
<div class='thumbnail'>
<div onclick='arrow_left(5);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
<div onclick='arrow_right(5);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
<img id='5' class='img-responsive' src='path/to/img'>
</div>
</div>
<div id='ID_6' class='col-lg-4 col-md-6 portfolio-item'>
<div class='thumbnail'>
<div onclick='arrow_left(6);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
<div onclick='arrow_right(6);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
<img id='6' class='img-responsive' src='path/to/img'>
</div>
</div>
<div class='clearfix visible-lg-block'></div>

<div class='clearfix visible-md-block'></div>

<div id='ID_7' class='col-lg-4 col-md-6 portfolio-item'>
<div class='thumbnail'>
<div onclick='arrow_left(7);'><span class='glyphicon glyphicon-arrow-left' style='color: yellow; left: 78px; top: 5px;'></span></div>
<div onclick='arrow_right(7);'><span class='glyphicon glyphicon-arrow-right' style='color: yellow; left: 136px; top: 5px;'></span></div>
<img id='7' class='img-responsive' src='path/to/img'>
</div>
</div>


I don't have idea how upgreat that. If anyone can help me? Mabye someone know some other solution for that, but no drag and drop - I tested jQuery UI sortable and it doesn't work so well.

I don't need slider. I need present all images in page and changing them order (in administrator panel). Each image in database have field "Order" which affect the display order of images on page. I'm looking for solution for nice change this order.

Answer

You can replace the elements outerHTML like this:

 function arrow_change(el, fw) {
    var id = el.parentElement.parentElement.id;
    var id_number = eval(id.substr(3))
    var present_div = $('#ID_' + id_number + " div").get(0);//get(0) returns first DOM Element
    id_number = id_number + fw //fw is either 1 or -1;
    var next_div = $('#ID_' + id_number + " div").get(0);
    var present_html = present_div.outerHTML;
    var next_html = next_div.outerHTML;
    present_div.outerHTML = next_html;
    next_div.outerHTML = present_html;   
}

Specify parameter el with this and fw with either 1 or -1 depending on right or left

EX: onclick="arrow_change(this, 1)" is for a shift to the right.

Demo: https://codecanister.com/Project/d547eed9/1/fullscreen/b