25Feb

Shadowbox JS Wordpress Plugin

Plugins, Wordpress

A media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display pictures, movies, websites, inline content and more in all major browsers without navigating away from the linking page.

This plugin uses Shadowbox.js written my Michael J. I. Jackson.

Javascript libraries supported are: YUI, Prototype + Scriptaculous, jQuery, Ext, Dojo and MooTools. YUI, Ext, Dojo and MooTools are included in the plugin and Prototype + Scriptaculous and jQuery are used from the Javascript libraries included with Wordpress.

There is another Shadowbox plugin floating around but it implements Shadowbox.js differently, comes with no instructions, doesn’t give you an option of the JS library you use, and is written in Italian.

This plugin can also be used as a drop in lightbox replacement, without requiring you to edit posts already using lightbox.

Screenshots

imagewebsite
youtubeflvplayer

Samples
Pumpkin Cat Wordpress.org Google Video

Installation

  1. Upload the `shadowbox-js` folder to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Edit shadowbox-js.php and modify $jsLib and $lightCSS based on the comments following each variable.

Upgrade

  1. Deactivate the plugin through the ‘Plugins’ menu in WordPress
  2. Delete the previous `shadowbox-js` folder from the `/wp-content/plugins/` directory
  3. Upload the new `shadowbox-js` folder to the `/wp-content/plugins/` directory
  4. Activate the plugin through the ‘Plugins’ menu in WordPress
  5. Edit shadowbox-js.php and modify $jsLib and $lightCSS based on the comments following each variable.

Usage

  1. Create a link in your post in the following format:
    <a href="http://domain.tld/directory/to/image.jpg" rel="shadowbox[album]">Image</a>

    The above link can be to pretty much anything including websites, video files, YouTube, Google Video, inline content.

  2. Please see the markup on the Shadowbox.js javascript authors usage page for more information such as sizing the media.
  3. Be sure to include `rel=”shadowbox”` as this activates the plugin.
  4. If `rel=”shadowbox[album]“` is included the portion listed here as `[album]` will group multiple pictures into an album called album.
  5. If you are using this as a lightbox replacement you do not need to change rel=”lightbox” to rel=”shadowbox”. Shadowbox.js now supports rel=”lightbox” natively.
  6. If you want to make a gallery/album and only want one link to display you can now use class=”hidden” to hide the additional links.

NOTE: Do not use the visual editor for doing the above use the code editor. When modifying this post in the future do not use the visual editor; please use the code editor always.

Examples:

<a href="http://domain.tld/directory/to/image.jpg" rel="shadowbox[album]">Image</a>
<a href="http://domain.tld/directory/to/image.jpg" rel="shadowbox[album]"><img src="http://domain.tld/directory/to/image.jpg" /></a>

Additional File Payloads

jQuery:

0.9K 1 HTML/Text
139.0K 4 JavaScript Files
1.9K 1 Stylesheet File
141.9K Total size
6 HTTP requests

Prototype + Scriptaculous:

1.0K 1 HTML/Text
197.5K 5 JavaScript Files
1.9K 1 Stylesheet File
200.5K Total size
7 HTTP requests

YUI:

0.9K 1 HTML/Text
115.7K 3 JavaScript Files
1.9K 1 Stylesheet File
118.6K Total size
5 HTTP requests

Ext:

1.0K 1 HTML/Text
153.4K 4 JavaScript Files
1.9K 1 Stylesheet File
156.4K Total size
6 HTTP requests

Dojo:

0.8K 1 HTML/Text
104.8K 3 JavaScript Files
1.9K 1 Stylesheet File
107.7K Total size
5 HTTP requests

MooTools:

0.9K 1 HTML/Text
58.0K 3 JavaScript Files
1.9K 1 Stylesheet File
60.9K Total size
5 HTTP requests

Change Log

0.4 (2008-04-10):

  • Updated to use assetURL for location to shadowbox files
  • Cleaned up code and added extended comments
  • Added extras.css with support for hidden class
  • Added support to not include javascript libraries

0.3 (2008-02-26):

  • Updated Shadowbox.js to version 1.0 Final
  • Added support for Ext, Dojo and MooTools Javascript Libraries
  • Removed lightbox2shadowbox function/filter as Shadowbox.js now natively supports rel=”lightbox”
  • Consolidated repetitive code
  • Removed images that were not in use
  • Selected MooTools as the default as it contains the smallest payload

0.2 (2008-02-22):

  • Initial Public Release

To Do

  1. Determine why YouTube videos are not being resized correctly in Shadowbox

Download
Shadowbox JS version 0.4
Archived Versions

93 comments

Comments

  1. Gravatar Posted by david on Wednesday 27th February

    is there a way to automaticly give all of my images rel=shadowbox?

  2. Gravatar Posted by Matt on Wednesday 27th February

    @david: not easily. You would have to use a Plugin to do it and I’m not aware of any plugin that has that functionality. In addition rel=”shadowbox” is applied to the link and not the image which would make it more difficult. You wouldn’t want to apply it to all links only those with images.

    I may begin work on such a plugin shortly.

  3. Gravatar Posted by Josh on Thursday 28th February

    Is there a way to specify the dimensions of the media? I tried embedding a Google Video, and it was smaller than I prefer, so I tried the same with a YouTube video, which automatically fills the screen.

    Otherwise, great job!

    Josh

  4. Gravatar Posted by Josh on Thursday 28th February

    Sorry, I didn’t see that was already on your To-do list!

  5. Gravatar Posted by Matt on Thursday 28th February

    @Josh: You can specify the height and width manually by adding height and width to the rel portion of the a tag.

    See the example below:

    <a href="http://www.youtube.com/v/wbzLpteC8ng&autoplay=1" rel="shadowbox;width=405;height=340" title="David Beckham">YouTube</a>

  6. Gravatar Posted by Eric on Thursday 28th February

    Hey, this is a seriously cool plugin!

    I have somes questions about shadowbox with videos tho.

    If I specify a URL from, say, a Veoh video, then can I still use the FullScreen feature from the Veoh video player?

    Thx!

  7. Gravatar Posted by Matt on Thursday 28th February

    @Eric: First thanks! Second, as long as the video player used by Veoh has a full screen mode, then that full screen mode will work. The FLV Player that is included with the plugin has a full screen mode and that works without problem.

  8. Gravatar Posted by Eric on Thursday 28th February

    Thanks for your answer!

    I actually tried implementing Shadowbox into my new blog and it’s working well. However, I am still having trouble getting the Full Screen function to work with a Veoh video. I am sure the Veoh video has a Full Screen function. Here is the link I use to post the video in a Shadowbox:
    Bleach 162

    I am not sure what I have to specify to enable the Full Screen function. Right now if I click the Full Screen button, nothing happens.

    Other than that, everything else working great!

    Any help would be greatly appreciated.

  9. Gravatar Posted by Eric on Thursday 28th February

    Sorry I realized my shadowbox link was incorrect.
    Its better if I post it this way:

    <a href="http://www.veoh.com/videodetails2.swf?permalinkId=v6278349gZhm8ZDj&amp;id=anonymous&amp;player=videodetailsembedded&amp;videoAutoPlay=0" rel="shadowbox;width=1024;height=768" title="Bleach 162" rel="nofollow">Bleach 162</a>

    Thx

  10. Gravatar Posted by Josh on Thursday 28th February

    Thanks, I hadn’t seen that documentation anywhere about dimensions. Perhaps I missed reading a file somewhere?

  11. Gravatar Posted by Edeving on Saturday 1st March

    I am interested in more info about editing the colors and the text of this plugin. Want to translate it!

  12. Gravatar Posted by Miles on Monday 3rd March

    I have noticed two possible bugs with the shadowbox plugin.

    First, I noticed that it does not seem to want to play any streaming videos that are located on my streaming server beginning with the protocol rtsp://

    Second, I noticed it does not like to play the slideshow component I have purchased from http://slideshowpro.net/. Slideshowpro is just a component displayed in a swf, for those of you who are unfamiliar.

    These features worked with the original shadowbox written by Michael J. I. Jackson. But will not work with the plugin.

    Any ideas?

  13. Gravatar Posted by Matt on Monday 3rd March

    @Miles: This plugin implements the Shadowbox.js plugin simply by inserting the javascript libraries and css files into the headers. There have been no modifications to the Shadowbox code.

    I have noticed however that WordPress can cause some issues because it converts special characters to html friendly characters. Such as &. And when doing this Shadowbox.js has some difficult determining the mime type of the files.

  14. Gravatar Posted by volderette on Tuesday 4th March

    Im using this plugin for wordpress, but it doesnt load pages in the format http://foobar.com/page/ Is there a solution for this? Thank you in advance.

  15. Gravatar Posted by Babak on Tuesday 4th March

    Hi, could you please tell me what this means exactly (in n00b speak)?

    “Edit shadowbox-js.php and modify $jsLib and $lightCSS based on the comments following each variable.”

    also what do you mean by this:

    NOTE: Do not use the visual editor for doing the above use the code editor. When modifying this post in the future do not use the visual editor; please use the code editor always.

    ??

  16. Gravatar Posted by Matt on Wednesday 5th March

    @Babak: If you are not sure what it means to modify $jsLib and $LightCSS then don’t do it. The plugin will simply work with the defaults.

    As for not using the visual editor when you are typing a post or page there is a tab that says visual and a tab that says code. When writing a post that uses this plugin never use the tab labeled visual. Always use the tab labeled code.

  17. Gravatar Posted by Babak on Thursday 6th March

    thank you!

  18. Gravatar Posted by Luke on Friday 7th March

    Hello Matt,

    Your plugin and provided comments as well as written instructions for the plugin are very helpful and I am happy to have found such a great feature to utilise for my website. I’m currently in the process of uploading completed assignments in the form of videos/images/flash files to get feedback from friends, classmates and others.

    What I wanted to ask you is how could I present your code for the shadowbox to show a thumbnail so that there is a visual descriptor before clicking on it to watch a larger version (be it a video or image), rather than just a link?

    Thank in advance for your continued support.

    Warm regards,

    Luke

  19. Gravatar Posted by Rene on Friday 7th March

    First of all, LOVE the plugin. Very sexy. I think I have a pretty challenging task…

    I want to be able to use this feature when someone clicks on a page in the main navigation. The only way I know how to redirect pages to external URLs is to use the “EasyRedirect” plugin which also does not have the external link open in a new window. I figured this Shadowbox feature would look so nice when needing to direct someone to an external site. Have any ideas?

    BTW — I did try to go into the easyredirect.php to see if I could add the rel=”shadowbox” to the link — and I am just not that up to snuff with PHP. I have yet to find any support for the easy redirect plugin.

    Thanks again for the awesome plugin. Very nice.

  20. Gravatar Posted by Arun on Monday 10th March

    Thank you for this brilliant plugin :)

  21. Gravatar Posted by Cybershead on Monday 10th March

    fantastic plugin… Can you tell me how i can use shadowbox from Flash, i.e if i have a link in flash so it will still open i shadowbox like it would if i linked from an html page etc. Thanks again

  22. Gravatar Posted by San Diego Web Designer on Tuesday 11th March

    Matt, what an awesome plugin. I’m just getting my site revamped in WordPress (1st timer). I have previously installed and worked with Lightbox via handcoding and CSS. Your plugin saves VALUABLE amounts of time and validates. Fantastic contribution to the WordPress Community.
    Thanks-

  23. Gravatar Posted by Matt on Tuesday 11th March

    @Luke: You would simply need to create a thumbnail image upload it using WordPress while writing a post and create a link in the form of:
    <a href="..." rel="shadowbox"><img src="..." /></a>

    See my examples above under the usage section.

    @Rene: At this point in time I’m not sure what you would need to do. If I have some available time in the near future I’ll take a look into it.

    @Cybershead: That is a bit out of scope for what this plugin is aimed at. I would see the original authors site of Shadowbox.js to see if you can find that information. http://mjijackson.com/

  24. Gravatar Posted by Matt on Wednesday 12th March

    Love this script. One problem, it seems not to work in IE7? Is this the case or do I have something mis-configured?

  25. Gravatar Posted by Josh on Thursday 13th March

    The script works with IE, BUT I just ran into a problem with using it while the ‘curreX’ currency converter widget is installed. That widget breaks shadowbox. And Shadowbox breaks that widget AND any dropdown boxes on the page. This is, of course, only when BOTH plug-ins are active.

  26. Gravatar Posted by Matt on Thursday 13th March

    @Josh: I would imagine it is because curreX loads prototype.js for its use. This plugin uses mootools by default and it may be causing some issues. I would try setting the jsLib variable in shadowbox-js.php to prototype and see if that fixes your problem.

  27. Gravatar Posted by Matt on Thursday 13th March

    @Matt: have you tried viewing this post in IE7 and clicking on one of the samples?

    It does work in IE7 in case you haven’t tried.

  28. Gravatar Posted by Josh on Thursday 13th March

    That worked! Thanks!

  29. Gravatar Posted by Babak on Monday 17th March

    Matt, I’ve uploaded and installed the plugin but it doesn’t seem to work. I can see a brief lightbox effect, when the whole screen goes grey after clicking on the image with the rel="nofollow" tag but then it fails.

    see here for an example, where it says, Click to Enlarge Graph

  30. Gravatar Posted by OwlBoy on Tuesday 18th March

    Thank you for this. Helped me reduce the size of the scripts I was using for a lightbox considerably by using this with the mootools.

    -Owl

  31. Gravatar Posted by Matt on Tuesday 18th March

    @Babak: I would try 2 things. One remove class=”imagelink” from the ‘a’ tag. Second try removing the onclick event for urchinTracker from the ‘a’ tag.

  32. Gravatar Posted by Babak on Tuesday 18th March

    oops! I meant rel=”lightbox” not “nofollow” but anyways…

    I’ve removed the class=”imagelink” but I’m not sure what you mean by onclick even for urchinTracker… I don’t see any such tag on the ‘a’ or ‘img’ tag?

    does that have something to do with google analytics?

    I’m confused (again)

    thanks for your help

  33. Gravatar Posted by Matt on Wednesday 19th March

    @Babak: Lets try changing the javascript library you are using in the plugin from mootools to prototype.

    Open shadowbox-js.php in some sort of text editor. Find the line that says
    $jsLib = 'mootools';
    and change that to
    $jsLib = 'prototype';

    After you have done that try it again. Another thing you can try is to temporarily disable Ultimate Google Analytics.

  34. Gravatar Posted by darrell on Thursday 20th March

    when i use shadowbox standalone, i can launch a slideshow from a single link with html like:

    image 
    image
    image

    and all i see is a single link labelled image, which when clicked, launches the slideshow

    however when i try this with your plugin, i get every one of those ‘image’ anchors in the list above (eg

    image
    image
    image

    )

    the slideshow still works once launched, but i just want a single link displayed on the post…

    am i missing something (ie does it need to be done differently using the plugin?), or is this broken?http://sivel.net/wp-content/themes/sivelnet/images/submit.gif

    thanks

    d

  35. Gravatar Posted by darrell on Thursday 20th March

    er sorry that example code should have read

    <a rel="shadowbox[gallery]" href="a.jpg" class="option" title="A">image</a> 
    <a rel="shadowbox[gallery]" href="b.jpg" class="hidden" title="B">image</a>
    <a rel="shadowbox[gallery]" href="c.jpg" class="hidden" title="C">image</a>
  36. Gravatar Posted by Matt on Thursday 20th March

    @darrell: The reason that it doesn’t work with this plugin is that the hidden class in not a feature of Shadowbox by Michael J I Jackson or this plugin.

    The hidden class was included in the full download from Michael J I Jackson’s site which includes a sample gallery and the documentation. That class is part of style.css which is part of the sample gallery.

    If you want to add this functionality to this plugin open shadowbox-js/css/shadowbox.css in a text editor or through the plugin editor in WordPress and add the following to the end of that file:

    .hidden {
         display: none;
    }
  37. Gravatar Posted by Colin on Sunday 23rd March

    hey.

    I was wondering if you could explain how to edit your script to include these options={counterType:’skip’, continuous:true, animSequence:’sync’}

    as described on mjijackson.com these can be added on a per link basis but i want to add it to the header so its site wide eg

    script type="text/javascript">
    
        $(document).ready(function(){
    
        var options = {
            resizeLgImages:     true,
            displayNav:         false,
            handleUnsupported:  'remove',
            keysClose:          ['c', 27], // c or esc
            autoplayMovies:     false
        };
    
        Shadowbox.init(options);
    
    });
    
    </script>
  38. Gravatar Posted by Matt on Sunday 23rd March

    @Colin: I’ll only go into the brief details about what you need to do. Past that if you are on your own. If you find that you have no idea about what you need to do then contact me via the “contact” link at the top of my site.

    1) Open shadowbox-js.php in your favorite text editor or using the WordPress plugins editor.
    2) Find the lines beginning with $initOps
    3) Add the additional lines for resizeLgImages, displayNav, handleUnsupported, keysClose and autoplayMovies.
    4) Save the file.

    If you need additional help please use the contact link at the top of all pages on this site.

  39. Gravatar Posted by volderette on Tuesday 25th March

    Still no solution for the http://foobar.com/page/ links?

  40. Gravatar Posted by Cal on Tuesday 25th March

    Hi,

    Great plugin! I’ve managed to get it working for one photo just fine - but heres a simple question.

    If I have say 10 photos, how do I create a link, say from one photo to the album and then when the shadowbox window opens from that link i can scroll or click through all the photos?

    Also, is there anyway to put captions under each photograph?

    Thanks and once again thanks for the great help!
    Cal.

  41. Gravatar Posted by chris on Wednesday 26th March

    hi,

    i just came accross your plugin and its the first of its kind which seems to work perfect for my website. just one tiny things regarding the flash player. is there any chance to get hold of the original fla of the player so i can add my player skin again ?

    cheers
    chris

  42. Gravatar Posted by Matt on Thursday 27th March

    @Cal:

    What you need to do is open shadowbox-js/css/shadowbox.css in a text editor or through the plugin editor in WordPress and add the following to the end of that file:

    .hidden {
         display: none;
    }

    Now all you need to do is create links to all of the images. In the images that you do not want to display add class="hidden" to the <a> tag. This will keep them from displaying. You will also need add the gallery to the rel attribute of all of the <a> tags so that it looks like rel="shadowbox[mygallery]"

    Full examples:

    <a href="http://example.org/image1.jpg" rel="shadowbox[examplegallery]" rel="nofollow">Image 1</a>
    <a href="http://example.org/image1.jpg" class="hidden" rel="shadowbox[examplegallery]" rel="nofollow">Image 2</a>

    Image 1 will display and Image 2 will not. But once you click Image 1 there will be Next/Previous links to navigate through your gallery.

  43. Gravatar Posted by Matt on Thursday 27th March

    @Chris: The FLV Player that is included with Shadowbox was created by Jeroen Wijering. You can find the player at http://www.jeroenwijering.com/?item=JW_FLV_Player

    You may find what you are looking for there.

  44. Gravatar Posted by Rob on Thursday 27th March

    Hi,

    great plugin. I have the same question as Cal above. I want to have only one link - view images - and when clicked it opens up the first image of a collection of about 10 images and the user can click next to view the other images. Is this possible?

    Thanks

    Rob

  45. Gravatar Posted by Matt on Thursday 27th March

    @Rob: See http://sivel.net/2008/02/shadowbox-js/#comment-932

    And seeing as though I am getting multiple requests for this the next version will contain and extras style sheet containing this functionality.

  46. Gravatar Posted by Rob on Thursday 27th March

    Thanks for that Matt - any chance you could quickly go over whats needed to do that - is it just CSS or editing the PHP? I can probably figure it out if you point me in the right direction. would it work if all of the images except the first were set to display:none?

    Thanks

    Rob

  47. Gravatar Posted by Matt on Thursday 27th March

    @Rob: It is just editing the CSS. You are correct about setting all but the first image to display: none.

  48. Gravatar Posted by Rob on Thursday 27th March

    Great. Thanks for the quick reply.

    Rob

  49. Gravatar Posted by Babak on Thursday 27th March

    Matt, I followed your instructions but no change. It still just blips and then skips it.

    I also upgraded ultimate GA plugin which uses the ga.js instead of urchin.js

    any ideas why it isn’t working? does it require a certain version of wordpress? thanks

  50. Gravatar Posted by Eric on Saturday 29th March

    I feel your version is currently the best of the lightbox-type plugins for Wordpress. My only question is this: how can I go about changing the size of the font used by the title attribute on a case-by-case basis. I’ve noticed if my title contains too much text (more than 38 characters or so), it gets cut off. Decrease font size or wrap? How?

  51. Gravatar Posted by Eric on Saturday 29th March

    Clarification: In the case I’m citing, my image is of a vertical orientation and only about 400px wide. So that ends up being about 38 characters. Obviously if I were to resize my image to make it wider, my title would fit. So perhaps it’s a matter of opinion whether wrapping or resizing the font would look better.

  52. Gravatar Posted by Steve on Tuesday 1st April

    I had this plugin activated and working on my site, and then I upgraded to Wordpress 2.5 from 2.3.3 and suddenly it is no longer working. Do you know what the problem might be? I’ve tried activating, deactivating, deleting. Everything, and I can’t figure it out. Even the old posts where it was working are no longer displaying it correctly.

  53. Gravatar Posted by Matt on Tuesday 1st April

    @Steve: Looks like you also have the Lightbox Plugin activated. Shadowbox and Lightbox will interfere with each other. Try disabling Lightbox and try again.

  54. Gravatar Posted by Steve on Tuesday 1st April

    Thanks for your quick response. I disabled Lightbox and it still is not working.

  55. Gravatar Posted by Matt on Tuesday 1st April

    @Steve: Try:

    Open shadowbox-js.php in some sort of text editor or with the wordpress plugin editor. Find the line that says
    $jsLib = 'mootools';
    and change that to
    $jsLib = 'prototype';

  56. Gravatar Posted by Steve on Tuesday 1st April

    Nope, that didn’t do anything.

  57. Gravatar Posted by Chris on Friday 4th April

    @Steve:
    Did you tried to deactivate MyGallery? That worked for me, maybe it has the lightbox-plugin integrated or something like this.

    @all:
    If I view my blog in Firefox all’s fine.
    If I view it in IE6, too..
    But in IE7 the overlay is in the foreground, but the reffered website is show BEHIND the overlay, under the sidebar and the content in the background. I changed $jsLib to “yui” and “prototype” but it didn’t help.
    I tried do download mootools.js from the mootools site, but that was a bad idea, so i changed it back.
    I was looking in the css-file for an error but I couldn’t find one. I hope someone can help me with this ’cause it’s an urgent problem, I have to finish my blog :-)

  58. Gravatar Posted by chris on Monday 7th April

    Sorry for asking, found my error.
    It’s something in my configured Theme

  59. Gravatar Posted by Rich on Tuesday 8th April

    Firefox for Mac has a little bug in it that it will turn Flash movies invisible if there is any element on the website touching it with a CSS opacity to it. Weird bug but documented.
    Shadowbox fixes this by detecting if it’s a FF for Mac browser and places a overlay-85.png file as the overlay instead.
    Problem is that it doesn’t seem to be working… on my wordpress site at least. It’s still placing the opacity color like it does for all of the other browsers. Know what may be going on?
    To view the offending page, go here:
    http://richsmithphotography.net/59-bryan-and-abby.html
    But you have to have Firefox for Mac.
    Thanks.

  60. Gravatar Posted by Rich on Tuesday 8th April

    I don’t understand why it works for your site and for the Shadowbox.js site but it won’t put the correct css for my site.
    If it doesn’t find the png file, will it default to the opacity color? I put that png file everywhere I’d think it would need to be. Still doesn’t fix it.
    Does it have something to do with jquery?
    I’d love to get this thing fixed since a lot of my photographer friends use Macs!

  61. Gravatar Posted by Rich on Tuesday 8th April

    Okay… I figured it out.
    This was the piece of code that was causing me the trouble.

    overlay: /(img|iframe|html|inline)/, // content types to not use an overlay image for on FF Mac

    I just took iframe and html out and it works fine now.

  62. Gravatar Posted by Flo - Panoramafotografie Hamburg on Friday 11th April

    Hi,
    very great plugin. Can anyone tell me how i can use it for a normal html-website without any wordpress?
    Thanks, Flo

  63. Gravatar Posted by Matt on Friday 11th April

    @Flo: Please see the Shadobox authors site at http://mjijackson.com/shadowbox for information on how to use Shadowbox without this plugin.

  64. Gravatar Posted by Keith on Tuesday 15th April

    I\’d like to make the \”close\” button larger, more easily seen and also to put it in say the top left corner, above the box. Is this possible? How would it be done?

  65. Gravatar Posted by Matt on Wednesday 16th April

    @Keith: I wont go into a CSS lesson here but you will need to make modifications to wp-content/plugins/shadowbox-js/css/shadowbox.css to reposition and enlarge the close link.

  66. Gravatar Posted by Kevin on Monday 21st April

    I’m having the same issue as @Steve above. Upgraded Wordpress to 2.5 and Shadowbox has lost the “next” and “previous” buttons.

    No other plugins on site.

    Tried switching these lines as suggested, no luck…
    $jsLib = ‘mootools’;
    and change that to
    $jsLib = ‘prototype’;

    Any advice would be great!

    Example on my site

  67. Gravatar Posted by Kevin on Wednesday 23rd April

    To answer my own question, I found that by changing the name of my picture group from [gallery] to [album] made the difference - all is working fine now….

  68. Gravatar Posted by Prasannah on Wednesday 23rd April

    Ah! Awesome plugin!.

    But I wasn’t able to use it alongside the ‘Flickr-Tag’ plugin that I currently use. I understand it doesn’t use ” tags while posting and uses some ‘[tag]‘ thing. Any idea how I could deal with it? Thanks for the great plugin anyway :mrgreen:

  69. Gravatar Posted by Steven Ansell on Saturday 26th April

    This looks like a really cool plugin but I haven’t been able to get it to work. I uploaded the plugin and activated it and used the rel=”shadowbox” in my link. I have used shadowbox on regular html site with no problem and was very excited to use it on my blog. Any help would be very appreciated.

    Thanx.

  70. Gravatar Posted by Karen of Scottsdale on Monday 28th April

    instructions for inline content would be appreciated =)

  71. Gravatar Posted by Eric Hamby on Saturday 10th May

    Im trying to play an .AVI and the player just says connecting and never plays. the link is right but the media player wont connect. anyone else having this issue?

  72. Gravatar Posted by Joseph on Monday 12th May

    Nice work.

  73. Gravatar Posted by Kjetil on Monday 19th May

    Just a big Thanks!
    Easy to use, works perfectly - one plugin to implement both Flash videos, Quicktime (QTVR) movies and images. Perfect. Even quite easy to configure (though one has to tweek javascript file).
    Keep up the good work
    Kjetil

  74. Gravatar Posted by Jon on Tuesday 20th May

    I got the plugin to work perfectly, but when I click on a image to activate the shadowbox, the other flash content on my page disappears. Any idea on how to fix this?

  75. Gravatar Posted by GreatCoolDeals on Wednesday 28th May

    Hello, I’m unable to get it to work as well, although I have inserted the rel=”shadowbox” code in my a href links.

    any ideas?

  76. Gravatar Posted by Christian on Wednesday 28th May

    @GreatCoolDeals

    Did you tried to deactivate all other Plugins to test if there’s one not compatible?
    For me it didn’t work with the MyGallery and Lightbox Plugin activated.
    But there might be some other Plugins which have Lightbox or something else included. Just try activating one after another.
    Hope this will help you.

  77. Gravatar Posted by Pallab on Monday 2nd June

    The plugin works great on my blog with dojo, but doesnt work with the default motools implementation.
    I am not using any other lightbox type plugin.
    When motools js is being used the loading page (a loading animation with cancel link) is displayed perpetually.

  78. Gravatar Posted by Kartik on Thursday 5th June

    Hey.. i m trying to put shadowbox in my flash web-site..
    as in i have few photos and swf’s which i want to be opened in the shadowbox when i click them..

    Please help..i

  79. Gravatar Posted by Bonney on Thursday 12th June

    first, i love the plugin and sorry for my bad english. every movie (flv & mov) have a white flash at the start. how can i fix this?

  80. Gravatar Posted by derek on Thursday 12th June

    hello im having trubble with the frame it opens up….
    first-when i try to get it to open a utube video it opens the hole page not just the video
    second-the frame doesnt go up hight enough on my page people have to scroll down to see the hole shadow box and when u do that u can see the unshadowed page

  81. Gravatar Posted by miCRoSCoPiC^eaRthLinG on Thursday 19th June

    Hi there :)
    Even I’m facing problems getting it to work. However, this isn’t just limited to shadowbox. As a matter of fact any sort of lightbox / thickbox type plug-ins won’t pop the div up ! Instead the linked media is opened up in a blank page. I’ve no clue which other plug-in is interfering with it - that’s what I’m trying to figure out. Can you suggest some method through which I can determine the cause of the conflict?

    And in respect of this and this comment, curreX no longer uses Prototype. That was an ancient version of the plug-in. I’ve long shifted to jQuery and I moved jQuery to a separate namespace, so that it doesn’t conflict with any other JS lib using the $ namespace and cause breakdowns.

    Cheers,
    m^e

  82. Gravatar Posted by Flo on Wednesday 25th June

    Hi,
    i use shadowbox on several sides and i really like it.
    But i have got 2 Problems blog

    P.E. On my blog http://www.fotofraktion.de if i open a photo in the shadowbox, there is no “next” under the shadowbox-window, that whould be a link to the next picture i use with shadowbox.
    On another blog it had “next” and “previous” option. How can io get it?

    Another question is by using the shadowbox-plugin on a site not made by wordpress (but maybe someone can help me), its on http://fb-hotels.de/hotelfotos/pdf-download.htm . My problem is that the shadowbox-plugin loads after the last photo. So if i have a slow connection or many photos on one site, the shadowbox plugin doesn´t work with my first click.
    How can i manage to load the plugin earlier.

    Thanks, Flo

  83. Gravatar Posted by Elessar on Sunday 29th June

    Hi,

    Congratulation, it’s a wonderful plugin, love it, but there is something that could be a plus, it the possibility to have a little description under the photo, video or website, well for me it will be useful, but i don’t know how to do it.

    Keep going, you do great job.

    Regards, ;)

  84. Gravatar Posted by Morosaka on Tuesday 1st July

    Matt, great job with this plugin.

    I’m trying to get it to be reasonable with other mootools aware FXs but it is not liking mootools.js V1.2 so I end up having to load the jquery library, but I’d like to spare myself those extra 100+ Kb of code.
    Is shadowbox V 0.4 loked in with mootools v 1.11 or I’m messing up somewhere else?

  85. Gravatar Posted by Sakamoro on Tuesday 1st July

    Also, are u planning a new version soon? if so it would be great to have access to all the aptions the mjijackson.com flash player has to offer (see the simpler implementation of the player @ http://mac-dev.net/blog/flash-video-player-plugin-customization/)

    I was trying to trigger the shadowbox using the fullscreen button on the player itself, like they do it @ ted.com. Do you think it’s possible without messing up with the player itself?

    Tx for your work. Keep it up.

  86. Gravatar Posted by Sakamoro on Wednesday 2nd July

    oops, I meant http://www.jeroenwijering.com flash player

  87. Gravatar Posted by Marco on Wednesday 2nd July
    HI,
    exscuse me my English....
    I'm Italian and I don't speak English very well.... :(
    
    I tried your SHADOWBOX plug-in and it's very cool !!!
    But I found one problem:
    • TABBER NAV (http://www.barelyfitz.com/projects/tabber/) don't work correctly...
    Tabber not show.... :(
    
    
    At this LINK there is my blog (under construction):
    http:///www.opidalladaga.com
    You see that tabber Nav (only grey area is displayed at the top of the page) is not working properly
    
    At this PAGE in my blog there is a LINK for activate the SHADOWBOX
    http://www.opidalladaga.com/interessi-vari/prova-lightwindow
    (click on word "shadowbox")
    SHADOWBOX working properly.
    
    If SHADOWBOX plug-in is disabled, TABBER NAV working properly...
    Maybe it could be a conflict javascript or css...
    Any suggestions?
    
    Thanks
    Bye
  88. Gravatar Posted by Ho Meng on Monday 7th July

    Hi. I have encountered a minor problem. The overlay background doesn’t seem to work on Firefox. Any solutions? Thanks!

Pingbacks

  1. links for 2008-02-28 at orioa Pingback on Wednesday 27th February
  2. Ichigo no Burogu Pingback on Sunday 30th March
  3. diploD » Blog Archive » Shadowbox JS: una media gallery nel plugin per wordpress Pingback on Monday 14th April
  4. Vise videoer p Pingback on Tuesday 1st July
  5. Video Package Wordpress Theme : Jerico Systems Pingback on Wednesday 2nd July

Leave a reply


Contact