Shadowbox not working in Wordpress test site

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Shadowbox not working in Wordpress test site

imandd
I'm trying to use Shadowbox to display videos for a new website. I'm tried liking to the video from a image map and a text link. Both links open the video in a new blank page.

If you go to the new test site, you'll see the two links. The first is "Watch the presentation" and the other is "My Image". Both use the ref tag and every other work around I've discovered including the header tag. The footer tag causes problem no matter where I place it so I'm not sure if that's what the problem is or not.

I'm hoping someone can take a look and let me know what I'm missing.
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox not working in Wordpress test site

manfer
That page is not loading the shadowbox library (shadowbox.js). Only the css (shadowbox.css) is being loaded. Without the js file the library wont work.

Besides, if you solve that, the anchor (a) link is going to work but the map I'm almost sure wont work. Only on anchors, a tags, it is allowed to use the rel attribute to specify shadowbox parameters.

You have an example of how you inform shadowbox that you want links in a map opened in a shadowbox popup in github where the shadowbox code is hosted:
https://github.com/mjijackson/shadowbox/blob/master/examples/image-map.html

If you look to that example youll see it use the shadowbox API function Shadowbox.setup to configure the map as shadowbox links.

So first try to solve the missing shadowbox.js and test the "the image" link. If it works try to understand how it is done for the map or ask again.
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox not working in Wordpress test site

manfer
If you are not using it, the shadowbox-js plugin for wordpress:
http://wordpress.org/extend/plugins/shadowbox-js/
works fine to integrate shadowbox in wordpress.

If you are not using it then you forgot something because the shadowbox library is not being loaded. If you are using that plugin, you should review the configuration, there's a parameter that is recomended to turn off if you experiment problems like yours with not shadowbox library in the page.

Besides I can see that jquery is loaded two times in your page, and two different versions, but this is not making problems (anyway you should try to load jquery only once).

Once you solve the shadowbox library problem, your a link should work though not sure which dimension would the video have. To open a video on specific dimensions you must include those parameters in rel attribute. So your  link should look:

<a href="http://ashbaland.com/ashbaland2011/VIDEOS/GunsN%27RosesBalladofDeath.mp4" rel="shadowbox; width=480; height=270">The image</a>

And the map should be like this:
<pre>
<script type="text/javascript"> Shadowbox.setup(document.getElementById("gnrvideo1").getElementsByTagName("area"), { width: 480, height: 270 //, // player: "qt" // you have to test if it is needed, most of the times it is detected automatically }); </script>
<map name="gnrvideo1" id="gnrvideo1">
<area href="http://ashbaland.com/ashbaland2011/VIDEOS/GunsN'RosesBalladofDeath.mp4" coords="46,248,246,271" shape="rect">
</map>
</pre>

If you need more areas you only need to include all those inside your image map. No more changes needed.