Search code examples
javascripthtmlphotoimage-galleryshadowbox

Shadowbox loading a gallery of photos upon initial page load

I was able to set shadowbox to initailize upon page load to show a photo, but I need it to show a bunch of photos, and after looking at the shadowbox site, I cannot find how to do this. html for page:

<link rel="stylesheet" type="text/css" href="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
window.onload = function() {
Shadowbox.open({
content:'images/IMG00255-20110531-1435.jpg',
    player:     "img",
    title:      "Before and After- Hyundai Tiburon",
    height:     400,
    width:      700
});
};
</script>
Solution

  • I couldn't find a way to do it with shadowboxes built in functions but this is pretty simple and should work fine.

    <!DOCTYPE html>
<html>
<head>
    <title>Shadowbox</title>
</head>

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<style type="text/css">
    /* Hide all <a> tags */
    a[rel~="shadowbox"]{
        display: none;
    }
</style>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

<!-- on page load, fake a click to call shadowbox -->
<body onload="document.getElementById('first').click();">

<!-- put all gallery items like this. Only the first link needs the id "first". -->
<a href="https://www.google.co.nz/images/srpr/logo11w.png" rel="shadowbox[Gallery]" id="first"></a>
<a href="https://www.google.co.nz/images/srpr/logo11w.png" rel="shadowbox[Gallery]"></a>

</body>
</html>