This is a message.

Speeding up the portfolio

Many times portfolio images are so large that it does not make sense to load them all on the page before they are being viewed. This demo continues from the previous demo so that a large image is loaded only when it's being viewed. In addition, the next and previous images are preloaded so that they can also be viewed quickly.


A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

A Blue Flower

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.

Wed Jun 10, 2:35 PM © John Doe

     
standalone demo

Images further down on the scrollable are not being loaded. The page responds quickly and the download time will be minimal. This is very important for artists because many times their images are very large.

Changing the HTML structure

We use a similar HTML structure as in the previous demo, but only one simple thing needs to be changed. We have modified the HTML structure for a single entry inside the overlay. We are not using a normal img tag which causes the image to be loaded on the page. Instead, we use a title attribute for the scrollable item to store the name of the image file. 

<!-- image name is specified in title attribute -->
<div title="image1.jpg">
 
  <!-- the tooltip -->
  <div class="info">
    <h3>A Blue Flower</h3>
    <p>
      Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,
      consectetur.
    </p>
    <p class="copy">
      Wed Jun 10, 2:35 PM <strong>&copy; John Doe</strong>
    </p>
  </div>
</div>

HTML

JavaScript magic

Remember from our previous demo that when the overlay is opened, the scrollable is scrolled to the position that corresponds to the clicked thumbnail image. It is natural to create an onSeek callback function for the overlayed scrollable which is triggered every time the scrollable moves.

This callback uses the title attribute to dynamically create the image tag inside the scrollable item. Also, the tooltip effect is initialized at this point. We also do this for the next and previous items. This is only done once for each image as necessary. 

    // when scrollable moves ...
    $("#images").data("scrollable").onBeforeSeek(function() {
 
        var i = this.getIndex();
        var prefix = "/media/img/portfolio-demo" + "/";
        // grab previous/current/next items and place the image inside them
        this.getItems().slice(Math.max(i-2, 0), i+2)
                .each(function() {
 
                    var el = $(this);
 
                    // if image has not already been created ...
                    if (!el.find("img").length) {
 
                        // create it
                        var img = $("<img/>");
                        img.attr("src", prefix + el.attr("title") + ".jpg");
                        el.prepend(img).removeAttr("title");
 

                        // and initialize the tooltip for it
                        img.tooltip({
                            position: 'bottom center',
                            offset: [-85, -30],
                            opacity: 0.8,
                            effect: 'fade',
 
                            // position tooltips relative to the parent scrollable
                            relative: true
                        });
                    }
                });
    });

JavaScript