Home / valME.io - now with picture carousels and lightbox. Maximize your images and let them slide across the screen (subtitle: geeks are funny)  
5
Image of valME.io - now with picture carousels and lightbox. Maximize your images and let them slide across the screen (subtitle: geeks are funny)

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.


* Written by permalink    plaintext

With my incipient css skills, this is my attempt to add to the page load time:

* Written by permalink    plaintext

That's a bit of messed-up code. :)

Looks like there's a missing <div> and an <a href> in the wrong place. I always find it better to indent code to help determine when there are misplaced tags. Please try this:

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

  <div class="carousel-inner">

    <div class="item active">
      <div class="thumbnail">
        <a data-lightbox='lightbox-digdug_comment' href='http://www.edcollins.com/digdug/digdug-marquee.gif'>
          <img class="img-responsive center-block" src="http://www.edcollins.com/digdug/digdug-marquee.gif" alt="" style="max-height:200px;" />
        </a>
      </div>
    </div>

    <div class="item">
      <div class="thumbnail">
        <a data-lightbox='lightbox-digdug_comment' href='http://www.edcollins.com/digdug/digdug-fygar-2a.gif'>
          <img class="img-responsive center-block" src="http://www.edcollins.com/digdug/digdug-fygar-2a.gif" alt="" style="max-height:200px;" />
            <div class="carousel-caption">
              <p>Fygar</p>
            </div>
        </a>
      </div>
    </div>

    <div class="item">
      <div class="thumbnail">
        <a data-lightbox='lightbox-digdug_comment' href='http://www.edcollins.com/digdug/digdug-guy1b.gif'>
          <img class="img-responsive center-block" src="http://www.edcollins.com/digdug/digdug-guy1b.gif" alt="" style="max-height:200px;" />
            <div class="carousel-caption">
              <p>Dig Dug</p>
            </div>
        </a>
      </div>
    </div>

    <div class="item">
      <div class="thumbnail">
        <a data-lightbox='lightbox-digdug_comment' href='http://www.edcollins.com/digdug/digdug-pooka.gif'>
          <img class="img-responsive center-block" src="http://www.edcollins.com/digdug/digdug-pooka.gif" alt="" style="max-height:200px;" />
            <div class="carousel-caption">
              <p>Pooka</p>
            </div>
        </a>
      </div>
    </div>

    <div class="item">
      <div class="thumbnail">
        <a data-lightbox='lightbox-digdug_comment' href='http://www.edcollins.com/digdug/digdug-veg-1.gif'>
          <img class="img-responsive center-block" src="http://www.edcollins.com/digdug/digdug-veg-1.gif" alt="" style="max-height:200px;" />
        </a>
      </div>
    </div>

    <div class="item">
      <div class="thumbnail">
        <a data-lightbox='lightbox-digdug_comment' href='http://www.edcollins.com/digdug/digdug-00.gif'>
          <img class="img-responsive center-block" src="http://www.edcollins.com/digdug/digdug-00.gif" alt="" style="max-height:200px;" />
        </a>
      </div>
    </div>

  </div>

  <a class="left carousel-control" href="#user_id_digdug_comment_picture-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#user_id_digdug_comment_picture-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

</div>

Edit: After ignoring my own advice to avoid conflicts by not using "lightbox-my-post" for data-lightbox, updated lightbox name to lightbox-digdug_comment.

Written by permalink    plaintext

Worked! Thank you! That is cool! smiley

Written by permalink    plaintext

I think I just demonstrated what happens when you don't know what you're doing. There are now gray shadows on each side of the page. Sorry.

Written by permalink    plaintext

Believe it or not, this formatting fail was useful. After having a bit of a think around this, it's clear that complex HTML and css can still cause potential problems on the page (even after our revised guidance to only allow .css styling at an individual element level). Even the most proficient users are going to make mistakes, and moderators need to be able to deal with those problems.

We just rolled out a few changes to help deal with these potential problems. The first is a "plaintext" link that will be on each comment. Clicking this link will remove the "first layer" of HTML and .css formatting. (I say "first layer" because if the comment has code in it using the <pre> tag, that code is the second layer. To remove the second layer, click the plaintext link again.)

The plaintext link will allow users and moderators to identify which comment is potentially messing up the page's formatting. (If turning off the comment's HTML and .css by switching to plaintext corrects the page layout, you now know where the offending HTML/css is.)

This leads to the second change: we've added a flag called "bad HTML/css" and an associated option in /mod/modqueue to remove a comment for "formatting: broken HTML/css." When a moderator uses this option on a flagged comment, the comment will be moved to the comment graveyard with other removed comments, but displayed in such a way that it will no longer cause problems.

Written by permalink    plaintext

HA! That's a gentlemanly way of dealing with a screw-up! Anytime you need more bad HTML/css, I am at your service. It's good to feel useful. smiley

You need to be logged in to comment.
search only within GettingStarted

About GettingStarted

gettingstartedc_prompt

We're really not that complicated. (At least that's what we tell those we date.) But, if you're new to social media, social network, content management, blogs, or just don't get it, we're here to help. (And if you are new to any of those, where have you been hiding for the last 15 years? Maybe in a Y2K shelter?)

If the search button is your best friend, you really need to get a life. However, we won't discount how useful our buddy in the upper-right corner can be. (We find stroking his ego gets us better results.) So we'd suggest searching for answers first. But, if your question remains unanswered, let us suggest a few places to inquire:

  • /GettingStarted/FAQ: Frequently asked questions... obviously
  • /GettingStarted/Help: Don't struggle too long. Our community is happy to help. And they take upvotes and tips, too.
  • /GettingStarted/SuggestionBox: We welcome your suggestions. We want to grow with you. With deference to Tom Cruise, help us help you.
  • OurWorld: Great tool to quickly see how communities are structured.

If we turn your question into an FAQ, we’ll credit you back the karma to post it. It’s the least we can do.

Moderated by: