While working with a user who intends to take advantage of valME's latest functionality to setup your own website with a custom domain (don't forget - we'll help you convert your current website for free), a missing important piece was the ability to slide images across the screen (aka, a picture carousel). Happily, the great folks at Bootstrap have included this ability but it wasn't enabled within valME.

Well, now it is :)

Also, while we were in the code, we decided to add a lightbox which will pop-up and enlarge your pictures (you enable it by adding a link to your image with the attribute data-lightbox="lightbox-my-post").

To give you a sense of what it all does, and with thanks to the Github community and their good humor (click on one of the pictures too to see what happens):

...and here are a few buttons to press just for kicks:

valME Home Download all images from Github gc-disable composer thread The legendary PHP commit

"Woa! How did you do that?"

Here are the basics on how to add a picture carousel to any post, comment, or community header/footer. To do this, you must get into Source mode in the editor by pressing the Source button. Also, you must define and reference <id> attributes by always starting with "user_id_" (e.g., <div id="user_id_this-is-my-custom-id">). If you want to enable the lightbox, you have to wrap your images with an <a href>.

Here's some example HTML code you can use as a template (replace your <id>, images, and captions as appropriate):

<div id="user_id_picture-carousel" class="carousel slide carousel" data-ride="carousel" style="height:200px;">

  <div class="carousel-inner">

    <!-- Your images/gifs go here -->
    <div class="item active">
      <div class="thumbnail">
        <a data-lightbox='lightbox-my-post' href='http://mywebsite.com/my_image.gif'>
          <img class="img-responsive center-block" src="http://mywebsite.com/my_image.gif" alt="" style="max-height:200px;" />
            <div class="carousel-caption">
              <h3>Include a caption header if you want one</h3>
              <p>Include a caption if you want want</p>
            </div>
         </a>
      </div>
    </div>

    <div class="item">
      <div class="thumbnail">
        <a data-lightbox='lightbox-my-post' href='http://mywebsite.com/my_image.gif'>
          <img class="img-responsive center-block" src="http://mywebsite.com/my_image2.gif" alt="" style="max-height:200px;" />
            <div class="carousel-caption">
              <h3>Include a caption header if you want one</h3>
              <p>Include a caption if you want want</p>
            </div>
         </a>
      </div>
    </div>

  </div>

  <!-- These are the left and right controls if you want them -->
  <a class="left carousel-control" href="#user_id_picture-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#user_id_picture-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

</div>

We suggest using a unique name to group you pictures instead of "lightbox-my-post" in case there are other images on the page that also use a lightbox. Likewise, this applies to <id> in case there is another carousel on the page. Using unique names instead of those in the above template prevents conflicts.

Oh, you want to know how to do the buttons too? Simple - go back into Source mode and do the following (notice the Bootstrap classes?):

<p style="text-align:center;">
    <a class="btn btn-primary btn-sm" href="//valme.io/">valME Home</a>
    <a class="btn btn-primary btn-sm" href="https://github.com/sheershoff/gc-disable-gifs">Download all images from Github gc-disable composer thread</a>
    <a class="btn btn-primary btn-sm" href="https://github.com/composer/composer/commit/ac676f47f7bbc619678a29deae097b6b0710b799">The legendary PHP commit</a>
</p>

Cool, huh? Try it out and post your questions in this thread. Don't know .css or HTML? No problem - we're here to help.

P.S. - Yes, we know this page takes forever to load. Consider this a warning when you try to load 272 gifs on your posts or comments.