Home/ Questions/Q 6824165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T21:52:10+00:00

http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/ I’m trying to implement Slicebox into my website and I’m having issues. I

  • 0

http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/

I’m trying to implement Slicebox into my website and I’m having issues. I always want to offer users the option of Shadowbox within the same page, so I’m initializing both.

        <!-- Shadowbox code. -->
        <link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            Shadowbox.init();
        </script>

        <!-- Slicebox Code -->
        <script type="text/javascript">
            $('.sb-slider').slicebox();
        </script>

But I’m not sure how to get it to work within the actual page. I have this linking, as well as these images.

    <script type="text/javascript" src="javascript/scripts.js"></script>
    <script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script>
    <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.min.js"></script>
    <script type="text/javascript" src="javascript/slicebox/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.js"></script>
    <script type="text/javascript" src="javascript/slicebox/js/modernizr.custom.13303.js"></script>

And

            <div class="sb-slider">
                <img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" />
                <img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" />
                <img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" />
            </div>

Do I have it in the right directory?

http://imgur.com/FocVx

Any help would be appreciated, thanks.

FULL HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>

        <!-- This tag is required to make the page valid XHTML. -->
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <!-- Give your page a title. -->
        <title>Photo Gallery for NBC's Community</title>

        <!-- Put your name and a description of the assignment or project here. -->
        <meta name="author" content="" />
        <meta name="description" content="A collection of photos regarding NBC's Community television show." />

        <!-- This links to a sample CSS file. -->
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />

        <!-- This include a standard jQuery library and a sample JS file for your own code. -->
        <script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
        <script type="text/javascript" src="javascript/scripts.js"></script>
        <script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script>
        <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.min.js"></script>
        <script type="text/javascript" src="javascript/slicebox/js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.js"></script>
        <script type="text/javascript" src="javascript/slicebox/js/modernizr.custom.13303.js"></script>

        <!-- Shadowbox code. -->
        <link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            Shadowbox.init();
        </script>

        <!-- Slicebox Code -->
        <script type="text/javascript">
            $('.sb-slider').slicebox();
        </script>

    </head>

    <body>
        <div id="wrap">
            <div id="header">
                <img src="media/header.png" alt="Community Header" />
            </div>

            <p>Community is an American television comedy series created by Dan Harmon that airs on NBC. The series is about a group of students at a community college in the fictional locale of Greendale, Colorado. The series heavily uses meta-humor and pop culture references, often parodying film and television clichés and tropes. The series premiered Thursday, September 17, 2009, and airs in the 8:00 pm ET time slot. It previously aired in the 9:30 pm ET time slot, beginning with its premiere, but later relocated with its fourth episode. On March 17, 2011, NBC renewed Community for a third season, which premiered on September 22, 2011.</p>

            <div class="sb-slider">
                <img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" />
                <img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" />
                <img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" />
            </div>

            <div id="gallery">
                <table>
                    <tr><td><a href="media/community/fullsize/abed_annie_troy.jpg" rel="shadowbox[Gallery]" title="Abed, Annie and Troy"><img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" /></a></td><td><a href="media/community/fullsize/annie_paintball.jpg" rel="shadowbox[Gallery]" title="Annie playing paintball"><img src="media/community/thumbnails/annie_paintball.jpg" alt="Annie during the first paintball episode" /></a></td><td><a href="media/community/fullsize/annie.jpg" rel="shadowbox[Gallery]" title="Annie's Halloween costume"><img src="media/community/thumbnails/annie.jpg" alt="Annie as a skeleton" /></a></td><td><a href="media/community/fullsize/britta_dinosaur.jpg" rel="shadowbox[Gallery]" title="Jeff's and Britta's Halloween costumes"><img src="media/community/thumbnails/britta_dinosaur.jpg" alt="Britta's and Jeff's Halloween costumes" /></a></td></tr>
                    <tr><td><a href="media/community/fullsize/cast_cafeteria.jpg" rel="shadowbox[Gallery]" title="In the cafeteria"><img src="media/community/thumbnails/cast_cafeteria.jpg" alt="The cast in the cafeteria" /></a></td><td><a href="media/community/fullsize/cast_class.jpg" rel="shadowbox[Gallery]" title="In the classroom"><img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" /></a></td><td><a href="media/community/fullsize/cast_cloud.jpg" rel="shadowbox[Gallery]" title="Thinking"><img src="media/community/thumbnails/cast_cloud.jpg" alt="The cast thinking" /></a></td><td><a href="media/community/fullsize/cast_mural.jpg" rel="shadowbox[Gallery]" title="In front of a colorful chalkboard"><img src="media/community/thumbnails/cast_mural.jpg" alt="Cast in front of a chalkboard" /></a></td></tr>
                    <tr><td><a href="media/community/fullsize/cast_study_room.jpg" rel="shadowbox[Gallery]" title="Hanging in the study room"><img src="media/community/thumbnails/cast_study_room.jpg" alt="The cast in their study room" /></a></td><td><a href="media/community/fullsize/cast.jpg" rel="shadowbox[Gallery]" title="In the library"><img src="media/community/thumbnails/cast.jpg" alt="The cast" /></a></td><td><a href="media/community/fullsize/christmas_episode.jpg" rel="shadowbox[Gallery]" title="Transformed into Christmasy claymation characters"><img src="media/community/thumbnails/christmas_episode.jpg" alt="Claymation Christmas episode" /></a></td><td><a href="media/community/fullsize/pierce.jpg" rel="shadowbox[Gallery]" title="Pierce hears something!"><img src="media/community/thumbnails/pierce.jpg" alt="Pierce with other students" /></a></td></tr>
                    <tr><td><a href="media/community/fullsize/season_3.jpg" rel="shadowbox[Gallery]" title="The introduction to season 3"><img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" /></a></td><td><a href="media/community/fullsize/show_poster.jpg" rel="shadowbox[Gallery]" title="The classic Community poster"><img src="media/community/thumbnails/show_poster.jpg" alt="Poster for the show" /></a></td><td><a href="media/community/fullsize/troy_and_abed.jpg" rel="shadowbox[Gallery]" title="Troy and Abed In the Morning!"><img src="media/community/thumbnails/troy_and_abed.jpg" alt="Troy and Abed In The Morning" /></a></td><td><a href="media/community/fullsize/trio_paintball.jpg" rel="shadowbox[Gallery]" title="After an intense paintball match"><img src="media/community/thumbnails/trio_paintball.jpg" alt="Troy, Annie and Abed after paintball" /></a></td></tr>
                </table>
            </div>
        </div>
    </body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You trying to use DOM element when DOM is not ready. Please do following changes. It should work like this.

    First of all, remove these two script tag. They are unnecessary, we just combine them to only one script tag.

    <script type="text/javascript">
    Shadowbox.init();
</script>

<!-- Slicebox Code -->
<script type="text/javascript">
    $('.sb-slider').slicebox();
</script>

    Then just write these lines

    <script type="text/javascript">
$(function(){
    Shadowbox.init();
    <!-- Slicebox Code -->
    $('.sb-slider').slicebox();
});
</script>
    • 0