How swap all divs with each other

Question

That is how my gallery looks like:

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 1

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

Answer 2

The reason why the second image is not being updated is that you use replaceWith. You can change it for example with html() You can also improve the function you have by adding a second parameter to calculate the id as the only difference between arrow_left and arrow_right is the adding or subtracting 1.

function swapImage(shouldAddOne) {
  var id = $(event.target).parents('.portfolio-item').first().attr('id');
  id = id.split('_');
  id = id[id.length-1];
  id = parseInt(id, 10);
  var present_div = $('#ID_' + id)
  var present_div_html = present_div.html();
  id = shouldAddOne ? id + 1 : id - 1;
  var next_div = $('#ID_' + id);
  var next_div_html = next_div.html();

  $(present_div).html(next_div_html); 
  $(next_div).html(present_div_html);
}

And you can use it in your html like so: swapImage(true) to move right and swapImage(false) to move left

In case you rather use a library, you can have a look at this slider

Answer 3

Here is an example that swaps the cards / grid items. I used a simplified version of the html you posted. I have assumed you are using Bootstrap from the styles you were using and have included it in the demo. If you would like a version that is not based on Bootstrap/jQuery let me know and I would be happy to update this.

Since the image placeholder service I used often returns the same image for a given size, I included a number in the card header that is static allowing you to see the swap.

I would discourage swapping via updating attributes or other "textual" approaches as you will have a hard time maintaining event handlers on the cards (click tracking for example) if your have them.

This approach also does not require maintaining the concept of current, next and previous as the new click handler can easily figure that out for you.

I added some additional CSS to "hide" the arrows that did not do anything. You could do the same or remove those style elements. The code will still work correctly with those elements in play.

There are some similar issues here that you might also be interested in:

• How to move an element into another element
• How to move child element from one parent to another

function swapChildren($parentA, $parentB) {
  if ($parentA.length === 0 || $parentB.length === 0){ return; }

  var $childrenA = $parentA.children();
  var $childrenB = $parentB.children();

  $parentA.append($childrenB);
  $parentB.append($childrenA);
}

$(".arrowLeft").on("click", function(){
  var $parent = $(this).closest(".portfolio-item");
  swapChildren($parent, $parent.prev());
});

$(".arrowRight").on("click", function(){
  var $parent = $(this).closest(".portfolio-item");
  swapChildren($parent, $parent.next());
});

.portfolio-item .thumbnail { text-align: center; }
.portfolio-item .thumbnail > div { display: inline-block; padding: 0.5em; }
.glyphicon { font-size: 2em; color: red; }

/*  hide arrows that don't do anything */
.row .portfolio-item:first-child .arrowLeft { display: none; }
.row .portfolio-item:last-child .arrowRight { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 1 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 2 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 3 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 4 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

    <div class='col-xs-4 portfolio-item'>
      <div class='thumbnail'>
        <div class="arrowLeft"><span class='glyphicon glyphicon-arrow-left'></span></div>
        <span style="font-size: 2em;"> 5 </span>
        <div class="arrowRight"><span class='glyphicon glyphicon-arrow-right'></span></div>
        <img id='1' class='img-responsive' src='http://lorempixel.com/200/100/'>
      </div>
    </div>

  </div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 4

Here's one possible solution which will work with any number of images, using plain vanilla javascript:

// Count Number of Images
var figures = document.getElementsByTagName('figure');


// Add Buttons to each Image
for (var i = 0; i < figures.length; i++) {

    // Create Move Image Left Button
    var leftSpan = document.createElement('span');
    leftSpan.classList.add('left');
    var leftArrow = document.createTextNode('\u25c0');
    leftSpan.appendChild(leftArrow);

    // Create Move Image Right Button
    var rightSpan = document.createElement('span');
    rightSpan.classList.add('right');
    var rightArrow = document.createTextNode('\u25b6');
    rightSpan.appendChild(rightArrow);

    // Add Left and Right Buttons to each Image
    figures[i].appendChild(leftSpan);
    figures[i].appendChild(rightSpan);
}


// moveLeft Function

function moveLeft() {
    for (var i = 0; i < figures.length; i++) {
        if (figures[i] === this.parentNode) {
            var thisFigure = this.parentNode;
            var currentImage = thisFigure.getElementsByTagName('img')[0];
            var currentFigcaption = thisFigure.getElementsByTagName('figcaption')[0];

            var previousFigure = figures[(i-1)];
            var previousImage = previousFigure.getElementsByTagName('img')[0];
            var previousFigcaption = previousFigure.getElementsByTagName('figcaption')[0];

            thisFigure.insertBefore(previousFigcaption,currentFigcaption);
            previousFigure.insertBefore(currentFigcaption,previousImage);
            thisFigure.insertBefore(previousImage,currentImage);
            previousFigure.insertBefore(currentImage,currentFigcaption);
        }
    }
}


// moveRight Function

function moveRight() {
    for (var i = 0; i < figures.length; i++) {
        if (figures[i] === this.parentNode) {
            var thisFigure = this.parentNode;
            var currentImage = thisFigure.getElementsByTagName('img')[0];
            var currentFigcaption = thisFigure.getElementsByTagName('figcaption')[0];

            var nextFigure = figures[(i+1)];
            var nextImage = nextFigure.getElementsByTagName('img')[0];
            var nextFigcaption = nextFigure.getElementsByTagName('figcaption')[0];

            thisFigure.insertBefore(nextFigcaption,currentFigcaption);
            nextFigure.insertBefore(currentFigcaption,nextImage);
            thisFigure.insertBefore(nextImage,currentImage);
            nextFigure.insertBefore(currentImage,currentFigcaption);
        }
    }
}


// Initialise Buttons
for (var i = 0; i < figures.length; i++) {

    if (i > 0) {
        var leftButton = figures[i].getElementsByClassName('left')[0];
        leftButton.addEventListener('click',moveLeft,false);
    }

    if (i < (figures.length - 1)) {
        var rightButton = figures[i].getElementsByClassName('right')[0];
        rightButton.addEventListener('click',moveRight,false);
    }
}

figure {
display: block;
position: relative;
float: left;
margin: 12px;
width: 200px;
height: 124px;
border: 3px solid rgb(0,0,0);
}

figure img {
display: block;
width: 176px;
height: 76px;
margin: 12px 12px 6px;
border: 1px solid rgb(31,31,31);
}

figcaption {
text-align: center;
}

.left {
display: block;
position: absolute;
left: 0;
bottom: 0;
cursor: pointer;
}

.right {
display: block;
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
}

<figure>
<img src="/image1.png" title="Image 1" alt="Image 1" />
<figcaption>Image 1</figcaption>
</figure>

<figure>
<img src="/image2.png" title="Image 2" alt="Image 2" />
<figcaption>Image 2</figcaption>
</figure>

<figure>
<img src="/image3.png" title="Image 3" alt="Image 3" />
<figcaption>Image 3</figcaption>
</figure>