Photobox – CSS3 JQuery Image Gallery

I came across a nice image gallery script which is lightweight, hardware accelerated and generally looks good. Image can be zoomed in and out using mouse wheel and navigated using mouse move. Image 'alt' is shown at the bottom, and the row of thumbnail images is also displayed at the bottom. The autoplay is supported and time is configurable. The script can be downloaded from Photobox github. It only supports IE 8 and higher, and does not look as good as in other browsers though.

The usage is very easy: jQuery, script and css have to be referenced as usual, i.e.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> 
<link href="@Url.Content("~/Scripts/photobox/photobox.css")" rel="stylesheet" type="text/css"/>
<link href="@Url.Content("~/Scripts/photobox/photobox.ie.css")" rel="stylesheet" type="text/css"/>
<script src="@Url.Content("~/Scripts/photobox/photobox.js")" type="text/javascript"></script>

A gallery with all default values (again, check Photobox github for parameters) is included as follows

<div id='gallery'>
  <a href="../../../Content/photobox/P1.jpg">
   <img src="../../../Content/photobox/P1_small.jpg" alt="photo1 title"/>
  </a>

  ...
  //More images
</div>

<script type="text/javascript">
 $(document).ready(function () {
     $('#gallery').photobox('a');
 });
</script>

A more involved setup with parameters may look as follows

<script type="text/javascript">
 $(document).ready(function () {
     $('#gallery').photobox('a:first', { thumbs:false, time:0 }, imageLoaded);
  function imageLoaded(){
   console.log('image has been loaded...');
  }
 });
</script>

I added a sample gallery (photos courtesy of my wife) to my website: Photobox Example

The border around the images is totally optional

<style type="text/css">
img {
   padding:1px;
   border:1px solid #021a40;
   background-color:#ff0;
}
</style>

References

Photobox – CSS3 JQuery Image Gallery
Photobox github
jquery access nested div
Using CSS for Image Borders
by Evgeny. Also posted on my website

A Simple Show/Hide Technique with jQuery

Today I learned a simple technique to show/hide parts of content on the page. In my sample application, I'm using it to display a part of a long blog post, and then at the end of the part to display a button that will show the rest of the post. The button initially says "Show more". When the button is clicked, it displays the previously hidden part and its text changes to "Show less". So, in essence, it toggles the display state of the div it is connected to, and its own text.

Additionally, I'm displaying posts dynamically, so for each post there is a div with the first part of the post, the div with the rest, and the toggle button. Here's how it works:

For each blog post in the model a div is created for the rest of the post, and a button. The ID for both is assigned dynamically using a simple counter.

@model Recipes.ViewModels.BlogViewModel
@{ int i = 0; }
@foreach (var post in Model.Posts)
{
    string divID = "hide" + i.ToString();
    string btnID = "btn" + i.ToString();
    <div id="middlecolumn">
        <div class="blogcontainer">
            <h3 class="title"><a href="#">@post.Title</a></h3>
            <div class="info"><span class="submitted">Submitted on @post.DateCreated</span></div>
            @MvcHtmlString.Create(post.BriefContent)
            <div class="buttonlink"><a id=@btnID href="javascript:toggleDiv('@divID', '@btnID');">Show more</a></div>
            <div id=@divID  style="display:none">@MvcHtmlString.Create(post.RestOfContent)</div>
        </div>
    </div>
    i = i + 1;
}

The javaScript function toggleDiv() takes two parameters: div ID and button ID. First the function toggles the div display property by using the jQuery function toggle(). Next, based on the div display state, the button text is set to one of the two possible values. And that's it.

<script type="text/javascript">
<!--
    function toggleDiv(divId, btnId) {
        $("#" + divId).toggle();
        if ($("#" + divId).css('display') == 'none')
        {$("#" + btnId).html('Show more'); }
        else
        { $("#" + btnId).html('Show less'); }
    }
-->
</script>

Here's the example of the page with the blog post

Rest of the post hidden

Rest of the post expanded

References

How to hide, show, or toggle your div
How to hide, show, or toggle your div with jQuery by Evgeny. Also posted on my website

jQuery Show/Hide Toggle

When I have a long list on a web page, I would like to give the user an option to hide it. Turns out that is simple to do with a little bit of jQuery. All the contents that I would like to hide or show would go into a div element. Next to it, I will add a link to toggle the hide/show behaviour. Here's how it looks in my code:

<div class="buttonlink">
 <a href="#" class="show_hide">Show/Hide List</a>
</div>
<div class="slidingDiv">
 @foreach (var item in Model.Recipes)
 {
  <ol>
   <li class="styled">
    <div class="display-button">@Html.ActionLink("Edit", "Edit", new { id = item.RecipeID })
    </div>
    <div class="display-button">@Html.ActionLink("Details", "Details", new { id = item.RecipeID })</div>
    <div class="display-button">@Html.ActionLink("Delete", "Delete", new { id = item.RecipeID })</div>
    <div class="display-info">@item.RecipeName</div>
   </li>
  </ol>
 }
 <a href="#" class="show_hide">Hide</a>
</div>

Here is the jQuery function that is called when the link is clicked

$(document).ready(function () {

 $(".slidingDiv").hide();
 $(".show_hide").show();

 $('.show_hide').click(function () {
  $(".slidingDiv").slideToggle();
 });

});

And the styles for the classes that I've just introduced above.

.slidingDiv {
    height:300px;
    padding:20px;
    margin-top:35px;
    margin-bottom:10px;
}
 
.show_hide {
    display:none;
}

That's it.

Shown

Hidden

References

jquery show/hide div
Simple jQuery Show/Hide Div
Fiddle
by Evgeny. Also posted on my website