jQuery: Changing div ID not working

Question

I'm back already and google-fu has brought me nothing.

I'm trying to make a sort of image gallery and i need to reset the divs dynamically on my slider but I'm having no luck, here's the process:

click 'left'
left div moves forward.
central divs ID gets called 'left' and vice versa, (using a temp ID to stop two divs having the same ID)
the css is reset as if it never happened except for the image being different.

My problem is that they seem to be resetting completely to their original state, as if the ID change never happened, any ideas?

Here's the JSFiddle

and here's the offending code:

    $('.navigationLeft').click(function() {
    console.log("yay");
    $( '#left' ).animate({
        marginLeft: selWidth
    }, 500, "linear",  function() {
        // Animation complete.
        $( '#center' ).attr('id', 'temp');
        $( '#left' ).attr('id', 'center');
        $( '#center' ).attr('id', 'left');
        $( '#left' ).css('width', '900px');
        $( '#left' ).css('height', '400px');
        $( '#left' ).css('overflow', 'hidden');
        $( '#left' ).css('position', 'relative');
        $( '#left' ).css('left:', '-900px');
        $( '#left' ).css('overflow', 'hidden');
        $( '#left' ).css('z-index', '2');
        $( '#center' ).css('width', '900');
        $( '#center' ).css('height', '400');
        $( '#center' ).css('position', 'absolute');
        $( '#center' ).css('overflow', 'hidden');
        $( '#center' ).css('z-index', '1');
    });
    //reset positions and change images
});

BTW.. You should chain your css like `$( '#left' ).css({'width': '900px', 'height':'400px'});` — Hardy, Mar 10 '14 at 00:14
It is a slider gallery of sorts yes. My apologies I thought I was precise with my issue, the problem, as you can see, if that the image resets as if the id changes never happened. — Platinum Fire, Mar 10 '14 at 00:21
@RokoC.Buljan I want a slider that wraps, the easiest way do this in my mind if to only have 3 divs, left, center, and right. and each time one transitions in, the whole thing resets in the background except for the image itself. — Platinum Fire, Mar 10 '14 at 00:33
@Alastor so basically you'r idea is to have 3 images element to control the left-to-center and right-to-center animations, but allow the user to have also more than 2 images in array? — Roko C. Buljan, Mar 10 '14 at 00:34
@RokoC.Buljan Pretty much yes, eventually a php script should scan and pass all the image paths in a folder via json, making it very simple to use. — Platinum Fire, Mar 10 '14 at 00:35
BTW2, you should add/remove CSS classes instead of setting these values in code.. — Andre Figueiredo, Mar 10 '14 at 00:42
try this: jQuery(this).prev("li").attr("id","newId"); or see this http://stackoverflow.com/questions/347798/changing-an-elements-id-with-jquery — user1647667, Mar 10 '14 at 00:48
@user1647667 In the format $('#center').prev('li').attr('id','newID'); That actually works! I would have thought that it would have needed an 'li' object for that? — Platinum Fire, Mar 10 '14 at 00:51

Roko C. Buljan · Accepted Answer · 2019-03-06T16:25:06.977

</img> tag is not a valid tag cause images don't have a closing tag. Also, jQuery is much more fun that you might think!
My suggestion is to not create <img> tags at all, let JavaScript do it for us, we're using an Array of images URL, after all.
Instead of jQuery's .animate(), use CSS transition!

jQuery(function($) {

  const gallery = {
    one: [ // (P.S: In HTML use data-gallery="one")
      'http://placehold.it/900x400/0bf/fff&text=1',
      'http://placehold.it/900x400/f0b/fff&text=2',
      'http://placehold.it/900x400/bf0/fff&text=3',
      'http://placehold.it/900x400/b0f/fff&text=4',
    ], // you can add more name:[] sets for other galleries
  };

  $('[data-gallery]').each(function(i, gal) {
  
    const name = $(gal).data('gallery');
    if (!Object.prototype.hasOwnProperty.call(gallery, name)) return;
    
    const $slides = $(gallery[name].map(url => $('<img>', {src: url})[0]));
    const tot = $slides.length; // Store how many images we have
    let c = 0; // Current slide Counter

    $('.slides', gal).append($slides); // Append created slides
    
    $(".prev, .next", gal).on('click', function() {
      c = ($(this).is('.next') ? ++c : --c) < 0 ? tot - 1 : c % tot;
      $slides.css({
        transform: `translateX(-${c*100}%)`
      })
    });

  });

});

/*QuickReset*/*{margin:0;box-sizing:border-box}html,body{min-height:100%;font:14px/1.4 sans-serif;}

/* Gallery */

[data-gallery] .slides {
  display: flex;
  position: relative;
  overflow: hidden;
  height: 170px;
}

[data-gallery] .slides > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

<div data-gallery="one" class="gallery">
  <div class="slides"></div>
  <button class="prev" type="button">PREV</button>
  <button class="next" type="button">NEXT</button>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

P.S: As a side-note, the following

    $( '#left' ).css('width', '900px');
    $( '#left' ).css('height', '400px');
    $( '#left' ).css('overflow', 'hidden');

is a bit verbose. Instead pass an object literal {} like:

    $( '#left' ).css({width:900, height:400, overflow:"hidden"});

This is perfect, not only does it help me fix my issue but also teaches key elements for more efficient coding. I have to say I'm impressed, this is an immense help. :3 Thank you. There is one thing, the code has made me lose my 'slide out' on the current image, but I'm trying to do that myself with this knowledge. Thank you again. — Platinum Fire, Mar 10 '14 at 19:33
Thanks to your tutelage it didn't take me long to work out how to make them slide in sync, thank you again. — Platinum Fire, Mar 10 '14 at 19:55

jQuery: Changing div ID not working

1 Answers1