Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by ibbhfsmeaf
ibbhfsmeaf
4,568 Points

Transition Images in JavaScript

How can I make an image gallery or something similar whereby the images transition one by one every few seconds, with a fading effect?

I am familiar with JS but have yet to actually implement it in my code. I am planning on learning it more in-depth at a later time and right now I just need a solution for this problem, and if anyone could help it'd be greatly appreciated.

This is my code for the images:

<?php include('header.php'); ?>
  <section>
    <div>
      <h1>Menu Items</h1>
      <img src="img/breakfast-combo.png">
      <img src="img/chicken-chips.png">
      <img src="img/chicken_burger_meal.png">
      <img src="img/fish-and-chips.png">
      <img src="img/hot-dog-meal.png">
      <img src="img/kids-chicken-strips.png">
    </div>
  </section>
<?php include('footer.php'); ?>
Marcus Parsons
Marcus Parsons
15,719 Points

Lansana,

You should also share what code you've came up with for the images so far.

ibbhfsmeaf
ibbhfsmeaf
4,568 Points

Here is the full code:

Header

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Mr Chips</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <div>
        <img src="img/chips-logo.png" id="mrChipsLogo">
      </div>
    </header>
      <nav>
        <ul>
          <li><a href="index.php"><img class="main-nagivation" src="img/home.png"></a></li>
          <li><a href="menu.php"><img class="main-nagivation" src="img/menu.png"></a></li>
          <li><a href="about-us.php"><img class="main-nagivation" src="img/about-us.png"></a></li>
          <li><a href="faq.php"><img class="main-nagivation" src="img/faq.png"></a></li>
          <li><a href="contact-us.php"><img class="main-nagivation" src="img/contact-us.png"></a></li>
        </ul>
      </nav>

Footer: 

    <footer><p>&copy; 2015 Sace.</p></footer>
    <script src="script.js"></script>
  </body>
</html>
Marcus Parsons
Marcus Parsons
15,719 Points

I mean the code that you are using to try to transition the images.

ibbhfsmeaf
ibbhfsmeaf
4,568 Points

This is the code I was using and I added a "fadein" id in the div but it wasn't working for me. I dont know what I am doing wrong.

$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});

2 Answers

Andrew Hansen
Andrew Hansen
Courses Plus Student 6,454 Points

If you're purely looking for a solution right now, take a look at some of the available jQuery plugins for this.

One great image plugin that looks promising is this one

ibbhfsmeaf
ibbhfsmeaf
4,568 Points

Yes, at this point I am purely looking for a solution. I'm too novice to be learning so much material at once - it is an information overload and I will likely not remember it. I am working slowly on developing my HTML/CSS/PHP with help of JS from others, i.e. this image transition thingy.

I looked at the link you gave me and found one that is very nice that I want to use. The download came with many folders and I'm not quite sure which to include.. Is there a blog related to that website that gives like tutorials?

Andrew Hansen
Andrew Hansen
Courses Plus Student 6,454 Points

take a look at the documentation on this page

It tells you just how to set up your javascript and HTML to get the plugin running. You do need to include a script that adds jQuery to your project. But as the documentation shows, any 1.x or 2.x version will suffice.

ibbhfsmeaf
ibbhfsmeaf
4,568 Points
ibbhfsmeaf
ibbhfsmeaf
4,568 Points

Thanks, Andrew!