Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Image sequence

Looking to be able to scroll through a sequence of image using JQuery while the mouse is over the image. I have 61 images in a container div and have all of them hidden except one. I would like to use jquery to be able to scroll through the images only when the mouse is over the image.

<div id="container">
        <img src="frames/noindex_basset_02_img000.jpg" class="animated">
        <img src="frames/noindex_basset_02_img001.jpg" class="animated">
        <img src="frames/noindex_basset_02_img002.jpg" class="animated">
        <img src="frames/noindex_basset_02_img003.jpg" class="animated">
        <img src="frames/noindex_basset_02_img004.jpg" class="animated">
        <img src="frames/noindex_basset_02_img005.jpg" class="animated">
        <img src="frames/noindex_basset_02_img006.jpg" class="animated">
        <img src="frames/noindex_basset_02_img007.jpg" class="animated">
        <img src="frames/noindex_basset_02_img008.jpg" class="animated">
        <img src="frames/noindex_basset_02_img009.jpg" class="animated">
        <img src="frames/noindex_basset_02_img010.jpg" class="animated">
        <img src="frames/noindex_basset_02_img011.jpg" class="animated">
        <img src="frames/noindex_basset_02_img012.jpg" class="animated">
        <img src="frames/noindex_basset_02_img013.jpg" class="animated">
        <img src="frames/noindex_basset_02_img014.jpg" class="animated">
        <img src="frames/noindex_basset_02_img015.jpg" class="animated">
        <img src="frames/noindex_basset_02_img016.jpg" class="animated">
        <img src="frames/noindex_basset_02_img017.jpg" class="animated">
        <img src="frames/noindex_basset_02_img018.jpg" class="animated">
        <img src="frames/noindex_basset_02_img019.jpg" class="animated">
        <img src="frames/noindex_basset_02_img020.jpg" class="animated">
        <img src="frames/noindex_basset_02_img021.jpg" class="animated">
        <img src="frames/noindex_basset_02_img022.jpg" class="animated">
        <img src="frames/noindex_basset_02_img023.jpg" class="animated">
        <img src="frames/noindex_basset_02_img024.jpg" class="animated">
        <img src="frames/noindex_basset_02_img025.jpg" class="animated">
        <img src="frames/noindex_basset_02_img026.jpg" class="animated">
        <img src="frames/noindex_basset_02_img027.jpg" class="animated">
        <img src="frames/noindex_basset_02_img028.jpg" class="animated">
        <img src="frames/noindex_basset_02_img029.jpg" class="animated">
        <img src="frames/noindex_basset_02_img030.jpg" class="animated">
        <img src="frames/noindex_basset_02_img031.jpg" class="animated">
        <img src="frames/noindex_basset_02_img032.jpg" class="animated">
        <img src="frames/noindex_basset_02_img033.jpg" class="animated">
        <img src="frames/noindex_basset_02_img034.jpg" class="animated">
        <img src="frames/noindex_basset_02_img035.jpg" class="animated">
        <img src="frames/noindex_basset_02_img036.jpg" class="animated">
        <img src="frames/noindex_basset_02_img037.jpg" class="animated">
        <img src="frames/noindex_basset_02_img038.jpg" class="animated">
        <img src="frames/noindex_basset_02_img039.jpg" class="animated">
        <img src="frames/noindex_basset_02_img040.jpg" class="animated">
        <img src="frames/noindex_basset_02_img041.jpg" class="animated">
        <img src="frames/noindex_basset_02_img042.jpg" class="animated">
        <img src="frames/noindex_basset_02_img043.jpg" class="animated">
        <img src="frames/noindex_basset_02_img044.jpg" class="animated">
        <img src="frames/noindex_basset_02_img045.jpg" class="animated">
        <img src="frames/noindex_basset_02_img046.jpg" class="animated">
        <img src="frames/noindex_basset_02_img047.jpg" class="animated">
        <img src="frames/noindex_basset_02_img048.jpg" class="animated">
        <img src="frames/noindex_basset_02_img049.jpg" class="animated">
        <img src="frames/noindex_basset_02_img050.jpg" class="animated">
        <img src="frames/noindex_basset_02_img051.jpg" class="animated">
        <img src="frames/noindex_basset_02_img052.jpg" class="animated">
        <img src="frames/noindex_basset_02_img053.jpg" class="animated">
        <img src="frames/noindex_basset_02_img054.jpg" class="animated">
        <img src="frames/noindex_basset_02_img055.jpg" class="animated">
        <img src="frames/noindex_basset_02_img056.jpg" class="animated">
        <img src="frames/noindex_basset_02_img057.jpg" class="animated">
        <img src="frames/noindex_basset_02_img058.jpg" class="animated">
        <img src="frames/noindex_basset_02_img059.jpg" class="animated">
        <img src="frames/noindex_basset_02_img060.jpg" class="animated">
    </div>
#container {
  position: fixed;
  overflow: hidden;
}

.animated {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
}
$(document).ready(function () {
    var pictureCount = $('#container img').length;
    var scrollResolution = 70;

    animateImage();

    function animateImage() {
        var currentScrollPosition = window.pageYOffset;
        var imageIndex = Math.round(currentScrollPosition / scrollResolution);

        if (imageIndex >= pictureCount) {
            imageIndex = pictureCount - 1; // Select last image
        }

        $("#container img").hide();
        $("#container img").eq(imageIndex).show();
    }

    $(window).on('scroll', function() {
        animateImage();
    }); ```
Steven Parker
Steven Parker
221,293 Points

Please show your code or link to a snapshot, and provide a link to the course page if the question relates to a course.

Have you already done the course where you construct a "lightbox"?

Posted my code and yes I have done the lightbox course

3 Answers

Steven Parker
Steven Parker
221,293 Points

For some reason this didn't work for me until I removed the "position: absolute;" setting. It made sense that it didn't need it, as only one photo is visible at a time. But I still don't understand why having it on made nothing visible. Without access to the actual image files, I had to make up some but I wouldn't expect that to affect the operation.

Anyway, I was able to limit the scroll to only when the mouse was over the image container by adding this:

  $("#container").on("mouseover", _=> document.body.style.overflow = "scroll");
  $("#container").on("mouseout",  _=> document.body.style.overflow = "hidden");

That solves part of my problem and thank you. I am still looking for it to only scroll through the pictures when the mouse is over the image, not scroll the page.

Steven Parker
Steven Parker
221,293 Points

But your selection mechanism is based on window.pageYOffset. Isn't the page scroll how your scroll through the images now?

That's the part I can't figure out and I'm sure it is an easy fix and right under my thumb. I don't want a page scroll but a scroll within the container div to scroll the pictures

Steven Parker
Steven Parker
221,293 Points

Are all the photos the same size? If so, you could do this in CSS with no JavaScript needed:

#container {
  position: fixed;
  overflow-y: scroll;
  width:  /* photo width + 20px for scroll bar */;
  height: /* photo height */;
}

The container will have it's own scroll bar but be fixed on the screen.

Yes they are all the same size