Image gallery using div background url

Question

When "#gallery is loaded, have the background image set to the first link in the list. "When "#trigger" is clicked, I want the background image of "#gallery" to be changed to the next sibling link. (Let me know if they should not be listed in the way that they are)

<div id="gallery">
    <ul>
        <li><a href="images/1.jpg"></a></li>
        <li><a href="images/2.jpg"></a></li>
        <li><a href="images/3.jpg"></a></li>
    </ul>
</div>
<div id="trigger">Trigger</div>

I tried making a variable for the location of the link, and using it for the background of "#gallery" and then creating a click function event for "#trigger" where it changes the value of the variable to the next link.

This is my first post, so I appreciate any feedback.

Image should be displayed as both `css` `background` of `#gallery` and at `img` element ? Or, only display single `img` element within `#gallery` element ? — guest271314, Dec 08 '15 at 19:44
I don't have the code anymore(wish I did) But on page load it set a variable that was the first link. Then it set the div background to that variable. Then when trigger was clicked it set the variable to the next link. (That's what it was supposed to do) I don't think I accomplished properly changing the variable or setting it as the background. — Brad, Dec 08 '15 at 19:46
@BradChoiniere Should two images be displayed , or one ? Is "background" `css` `background` property ?, or actual `img` element which should cover entire `#gallery` `div` ? — guest271314, Dec 08 '15 at 19:48
The ul is set to display: none; The images are to be displayed as the div's background. — Brad, Dec 08 '15 at 19:48
I made a variable using the ul li links. Then I used the variable as the url for the background image. — Brad, Dec 08 '15 at 19:50

Gadget Blaster · Answer 1 · 2015-12-08T20:13:57.377

Here is a fiddle: https://jsfiddle.net/7yqu78eL/

A little sloppy but it should help you get the idea. Personally I wouldn't put my images as link hrefs. Just put them in a javascript array and save the hidden HTML - plus they will be easier to work with as an array.

Html

<div id="gallery">
    <ul>
        <li><a data-image-id="1" href="http://lorempixel.com/300/300/sports/"></a></li>
        <li><a data-image-id="2" href="http://lorempixel.com/300/300/city/"></a></li>
        <li><a data-image-id="3" href="http://lorempixel.com/300/300/abstract/"></a></li>
    </ul>
</div>
<div id="trigger">Trigger</div>

jQuery

$(document).ready(function() {

  var currentImageId = 1;
  var totalImages = 3;

  rotateImage();

  $('#trigger').click(function() {
    rotateImage();
  });

  function rotateImage() {
    var url = $('#gallery').find('ul li a[data-image-id="'+currentImageId+'"]').attr('href');
    $('#gallery').css('background-image', 'url(' + url + ')');
    currentImageId++;
    if (currentImageId > totalImages) {
      currentImageId = 1;
    }
  }

});

CSS

#gallery {
  width: 300px;
  height: 300px;
}

#gallery ul {
  display: none;
}

Here is a fiddle with it as an array: https://jsfiddle.net/2c7z2qxq/ – much simpler.

Thanks for the idea of using them as an array. I wasn't sure at first whether it would be ideal. — Brad, Dec 08 '15 at 20:08

score 0 · Accepted Answer · answered Dec 08 '15 at 20:06

You can create an array of images and just change the url of the background-image applied to the div.

<div id="gallery">
</div>
<input type="button" id="trigger" value="Trigger">
<style>
#gallery
{
  background-image: url('/images/Image1.jpg');
  background-repeat: no-repeat;
}
</style>
<script>
var imageArr = ["/images/Image1.jpg"
                ,"/images/Image2.jpg"];
var slideIndex = 0; // sets the initial index
$('input:button').on("click",function()
{
  slideIndex++; // increment the index by 1 to get the next image
  if(imageArr.length <= slideIndex) // safe check - avoid index overflow and reset the index once reached the last image 
    slideIndex = 0;
  $("#gallery").css("background-image","url(" + imageArr[slideIndex] + ")");
});
</script>

That's exactly what I was looking for, thank you. Sorry for the lack of detail on my post, and the basic nature of the question. I'm new to jQuery. You helped a lot! :) — Brad, Dec 08 '15 at 20:20

Image gallery using div background url

2 Answers2