Member Avatar for newbi11

Hi everyone, I am having some problems implementing a js slide caption on my webpage and I would appreciate if someone could help.
Here is the Js caption
http://ryun.github.io/HCaptions/

and here is the code I am working with :

<html>
    <head>
        <style>
            .cap-overlay{
                font-family: monospace;
                font-size: 26px;
                color: #666;
            }
        </style>
    </head>
    <body>
        <a href="#myToggle" class="panel">
            <img src="images/pic01.jpg" width="1200" height="500" alt="">
        </a>
        <div id="myToggle" class="cap-overlay hide">
            <h3>Cupcakes</h3>
            <div class="content">
                Name: cupcakes.png<br />
                Photography: Ryun Shofner<br />
            </div>
        </div>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="jquery.hcaptions.js" type="text/javascript"></script>
        <script>
            $(window).load(function() {
                $('.panel').hcaptions({
                    effect: "slide",
                    direction: "left",
                    width:1200,
                    height:500
                });
            });
        </script>
    </body>
</html>

Here's the complete file

https://onedrive.live.com/redir?resid=A06766147C6C16D6!125&authkey=!AKFUcggasChhzc4&ithint=file%2czip

  • 2 Contributors
  • 3 Replies
  • 165 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by newbi11
Member Avatar for pixelsoul

Try this rather

$(document).ready(function() {
    $('.panel').hcaptions({
        effect: "slide",
        direction: "left",
        width:1200,
        height:500
    });
});
Member Avatar for newbi11

Hi , I tried what you suggested. It still didn't work. The caption displays under the image and it doesn't have the slide effect. I really hope someone could help out.

Member Avatar for newbi11

Anyone?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.