?
Solved

OnLoad image with Shadowbox

Posted on 2014-03-11
5
Medium Priority
?
1,569 Views
Last Modified: 2014-03-12
I followed instructions from shadowbox-js and I can't seem to load the image. It's stuck at loading. Code as below. Help?


<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    skipSetup: true,
    players: ["img"]
});

window.onload = function() {

    // open a welcome message as soon as the window loads
    Shadowbox.open({
        content:    '<img src="images/GangNamStyle.jpg" alt="GangNam" />',
        player:     "img",
        title:      "Gangnam Style",
        height:     320,
        width:      320
    });

};
</script>

Open in new window

0
Comment
Question by:rolandmy
  • 2
4 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 39920484
replace : '<img src="images/GangNamStyle.jpg" alt="GangNam" />',
by : "images/GangNamStyle.jpg",

Test page : http://jsfiddle.net/Rzk88/
0
 
LVL 61

Assisted Solution

by:Julian Hansen
Julian Hansen earned 800 total points
ID: 39920503
Try changing your player to html
<script type="text/javascript">
Shadowbox.init({
    skipSetup: true
});

window.onload = function() {

    // open a welcome message as soon as the window loads
    Shadowbox.open({
        content:    '<img src="images/a5.jpg" alt="GangNam" />',
        player:     "html",
        title:      "Gangnam Style",
        height:     320,
        width:      320
    });

};
</script>

Open in new window

Or change your content to just be the path of the image
<script type="text/javascript">
Shadowbox.init({
    skipSetup: true
});

window.onload = function() {

    // open a welcome message as soon as the window loads
    Shadowbox.open({
        content:    'images/a5.jpg',
        player:     "img",
        title:      "Gangnam Style",
        height:     320,
        width:      320
    });

};
</script>

Open in new window

0
 
LVL 2

Author Comment

by:rolandmy
ID: 39922442
I have followed the instruction and it's just not loading up. I have attached the html file along with the shadowbox css and js.

What am I doing wrong? =/
test.html
shadowbox.js
shadowbox.css
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 1200 total points
ID: 39922455
you shadowbox.js come from Mars.
Download it from here : http://www.shadowbox-js.com/download.html

Or use :

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/shadowbox/3.0.3/shadowbox.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/shadowbox/3.0.3/shadowbox.js"></script>

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

593 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question