Shadowbox JS
Shadowbox is an online media viewing application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating users away from the linking page.
This plugin uses Shadowbox written by Michael J. I. Jackson.
Javascript libraries supported are: None, YUI, Prototype, jQuery, Ext, Dojo and MooTools. Ext is included with the plugin, Prototype and jQuery are used from the Javascript libraries included with Wordpress, YUI is loaded from Yahoo APIs, Dojo and Mootools are loaded from Google APIs.
This plugin can also be used as a drop in lightbox replacement, without requiring you to edit posts already using lightbox.
By default this plugin will use Shadowbox for all image links, movie links, audio links and YouTube/Google Video links including those generated by the [gallery] shortcode.
Shadowbox is licensed under the terms of the Shadowbox.js License. This license grants personal, non-commercial users the right to use Shadowbox without paying a fee. It also provides an option for users who wish to use Shadowbox for commercial purposes. You are encouraged to review the terms of the license before using Shadowbox. If you would like to use Shadowbox for commercial purposes, you can purchase a license from http://www.shadowbox-js.com/.
This plugin also makes use of the JW FLV Player. JW FLV Player is licensed under the terms of the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. If you would like to use JW FLV Player for commercial purposes, you can purchase a license from https://www.longtailvideo.com/players/order2.
Please use the Shadowbox JS support forum for problems or questions with this plugin. Support questions will be ignored if left as comments on my site, through my contact form or by email. The only supported location for support questions is http://wordpress.org/tags/shadowbox-js.
Translations:
- Dutch
- Russian
Version Information
Version: 3.0.0.3
Requires WordPress Version: 2.7
Compatible Up To: 2.9.2
Download
Downloaded: 135246 times
Latest version: Download Shadowbox JS v3.0.0.3 [zip]
Other versions: Download Shadowbox JS archives
Screenshots
-
An Image
-
A Website
-
A YouTube Video
Samples
Sample Gallery using [gallery] shortcode
Installation
- Upload the
shadowbox-jsfolder to the/wp-content/plugins/directory or install directly through the plugin installer. - Activate the plugin through the ‘Plugins’ menu in WordPress or by using the link provided by the plugin installer
- Optional: Visit the settings page in the Admin at
Settings -> Shadowbox JS
Upgrade
- Use the plugin updater in WordPress or…
- Deactivate the Shadowbox JS plugin
- Delete the previous
shadowbox-jsfolder from the/wp-content/plugins/directory - Upload the new
shadowbox-jsfolder to the/wp-content/plugins/directory - Activate the Shadowbox JS plugin
- Optional: Visit the settings page in the WordPress admin at
Settings -> Shadowbox JS
Usage
- By default this plugin will add the activator attribute to all image links, movie links, audio links and YouTube/Google Video links that do not already have the activator attribute. Meaning basically, by default all images in the posts on your site will automatically be displayed using Shadowbox. If you want more fine grain control over the links continue with the next steps.
-
Create a link in your post in the following format (This link can be to pretty much anything including websites, video files, YouTube, Google Video and inline content):
<a href=”http://domain.tld/directory/to/image.jpg” rel=”shadowbox[album]“>Image</a>
-
Be sure to include
rel="shadowbox"as this activates the plugin. - If
rel="shadowbox[album]"is included the portion listed here as[album]will group multiple pictures into an album called album. Do not use[gallery]to define an album as WordPress has a shortcode that will interfere. - If you are using this as a lightbox replacement you do not need to change
rel="lightbox"torel="shadowbox". Shadowbox.js supportsrel="lightbox"natively. - If you want to make a gallery/album and only want one link to display you can use
class="hidden"to hide the additional links. - See http://shadowbox-js.com/doc/usage.html#markup for detailed markup instructions.
- If you are using using Shadowbox globally for all images but have an image you do not wish to use Shadowbox on use
rel="nobox"in your image link.
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. To disable the visual editor for all users see the Easy Disable Visual Editor plugin.
FAQ
Q. What image file types will this plugin automatically add Shadowbox to?
A. bmp, gif, png, jpg, and jpeg
Q. What movie file types will this plugin automatically add Shadowbox to?
A. swf, flv, f4v, dv, mov, moov, movie, mp4, asf, wm, wmv, avi, mpg and mpeg
Q. What audio file types will this plugin automatically add Shadowbox to?
A. mp3 and aac
Q. When I click on my YouTube links I see the full YouTube web site and not just my video. What is wrong?
A. You have probably used the wrong form of the YouTube URL. If you used something like http://www.youtube.com/watch?v=3D3kFn_3xRY that will disaply the YouTube website and not just the video. To just get the video use a link that looks like http://www.youtube.com/v/3D3kFn_3xRY.
Q. How can I use a custom Shadowbox skin without having to worry about it being deleted during the upgrade process?
A. In version 3.0.0.0 there are now 2 parts to the skin, the markup file and the CSS. Place your custom skin in a location where it will not get removed. For example in your current themes directory. Below is an example:
wp-content/themes/yourthemename/shadowbox-custom-skin
Once you have placed the skin in this directory you will need to add a few lines to your themes functions.php file. Below is some sample code:
function shadowbox_custom_markup($markup) {
$markup = 'http://example.org/wp-content/themes/yourthemename/shadowbox-custom-skin/markup.js';
return $markup;
}
add_filter('shadowbox-markup', 'shadowbox_custom_markup');
function shadowbox_custom_css($css) {
$css = 'http://example.org/wp-content/themes/yourthemename/shadowbox-custom-skin/shadowbox.css';
return $css;
}
add_filter('shadowbox-css', 'shadowbox_custom_css');
You do not necessarily have to do both. It is possible to only load a custom markup or only a custom css.
Q. Can I selectively load Shadowbox on pages that need it?
A. Yes. However this functionality requires WordPress 2.8. If you are running WordPress 2.8 and you would like to enable this functionality visit Settings -> Shadowbox JS and set Enable Smart Loading to true.
Q. Why isn’t this plugin working?
A. Check to make sure that you have <?php wp_head(); ?> in your themes header.php and <?php wp_footer(); ?> in your themes fotoer.php. See the default WordPress theme for examples. Also see the FAQ below.
Q. This plugin has stopped working since I installed another plugin or another plugin has stopped working since I installed this plugin. What can I do?
A. Try changing the Javascript Library used by this plugin to something other than ‘None’ on the Shadowbox JS settings page in the WordPress admin.
Changelog
3.0.0.3 (2009-11-07):
- Fix empty options on activation for new installs
3.0.0.2 (2009-10-30):
- Update shadowbox.js build from upstream
- Add option to disable sizzle.js
- Enhance Upgrade Logic
- Add Dutch translation
- Update to not start anything until init at earliest
- Split FLV from Auto Movies so that we can force certain file types to use the FLV player
- Replace logic to use the video height and width for all videos by defualt, not just Youtube and Google Video
3.0.0.1 (2009-06-30):
- Bring back PHP4 support
- Increase speed by reducing the number of queries
- Code cleanup
- Add changelog output to upgrade notice in admin. Requires WordPress 2.8
- Do not display majority of the settings page form if the options have been removed from the database
- Fix broken localization directory name in code and update localization template
- Remove unused javascript files
- Add Russian translation
3.0.0.0 (2009-06-10):
- Updated Shadowbox to 3.0b1
- Code cleanup and optimization, will only load the code into memory that is needed
- Removed IE8 hack since Shadowbox 3.0 now supports IE8
- Added options to the admin page for modifying the default size of YouTube videos
- Full screen in YouTube videos is now supported
- Added options to the admin page for modifying flashVars, flashParams and minimum flash version required
- Added option to the admin page for disabling Shadowbox.setup so that Shadowbox.setup can be run from another script to allow image maps through area tags
- Disabled the FLV player by default since it has a non-commercial license. Must enable FLV player after accepting licensing in the admin
- Added capability for loading shadowbox only when needed. Requires WordPress 2.8.
- Added capability for only loading the shadowbox players you want.
2.0.4.1 (2009-03-24):
- Add IE8 support by way of the X-UA-Compatibile meta tag
2.0.4.0 (2009-03-18):
- Use domready events for javascript libraries other than None for intialization of shadowbox so that shadowbox works before the page is completely loaded
- Initial support for WordPress 2.8, more updates will finalized as WordPress 2.8 is finalized
- Bulgarian translation for shadowbox.js added (Thanks Method-X for the translation)
- Code cleanup
- Change default size for Youtube videos
- Add automation to the_excerpt so links in custom excerpts can utilize shadowbox
- Support for custom skins using a filter (see the FAQ)
2.0.3.3 (2009-01-23):
- Fix issue where replacement was trying to be done when no replacements were necessary
- Add feature to attempt to automatically set Shadowbox language based on defined WordPress language
- Only load the required javascript in the admin when on the shadowbox-js settings page
- Clean up code
2.0.3.2 (2008-12-26):
- Fix animate and animateFade select options, were true/true, now true/false
- Fix PHP warnings about non-existent $_POST array indexes
2.0.3.1 (2008-12-23):
- Updated invalid php start tag
2.0.3.0 (2008-12-23):
- Added options page to admin interface
- Added support to automatically use Shadowbox for movie, audio and YouTube/Google Video links.
2.0.2.1 (2008-09-22):
- Fixed typo in variable name containing the previous rel attribute of the link
2.0.2 (2008-09-22):
- Added support to automatically use Shadowbox to display all images in your posts including those generated by the [gallery] shortcode.
- Added deactivator rel attribute. Use rel=”nobox” to not use Shadowbox to display an image when global activation is configured.
2.0.1 (2008-08-25):
- updated code for readability
- Added support for [gallery] shortcode
2.0 (2008-08-11):
- Updated shadowbox.js to version 2.0
- Added various options and changes to support shadowbox.js version 2.0
- Updated javascript library locations to use Google APIs and Yahoo APIs where applicable.
- Changed versioning of the plugin to match that of the shadowbox.js version
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
is there a way to automaticly give all of my images rel=shadowbox?
@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.
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
Sorry, I didn’t see that was already on your To-do list!
@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>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!
@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.
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:
<a href="http://www.veoh.com/videodetails2.swf?permalinkId=v6278349gZhm8ZDj&id=anonymous&player=videodetailsembedded&videoAutoPlay=0" title="Bleach 162" rel="nofollow">Bleach 162</a>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.
Sorry I realized my shadowbox link was incorrect.
Its better if I post it this way:
Thx
Thanks, I hadn’t seen that documentation anywhere about dimensions. Perhaps I missed reading a file somewhere?
I am interested in more info about editing the colors and the text of this plugin. Want to translate it!
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?
@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.
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.
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.
??
@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.
thank you!
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
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.
Thank you for this brilliant plugin :)
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
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-
@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/
Love this script. One problem, it seems not to work in IE7? Is this the case or do I have something mis-configured?
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.
@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.
@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.
That worked! Thanks!
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
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
@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.
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
@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.
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/blog/wp-content/themes/sivelnet/images/submit.gif
thanks
d
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>
@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; }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
@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.
Still no solution for the http://foobar.com/page/ links?
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.
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
@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:
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 likerel="shadowbox[mygallery]"Full examples:
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.
@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.
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
@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.
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
@Rob: It is just editing the CSS. You are correct about setting all but the first image to display: none.
Great. Thanks for the quick reply.
Rob
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
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?
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.
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.
@Steve: Looks like you also have the Lightbox Plugin activated. Shadowbox and Lightbox will interfere with each other. Try disabling Lightbox and try again.
Thanks for your quick response. I disabled Lightbox and it still is not working.
@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';Nope, that didn’t do anything.
@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 :-)
Sorry for asking, found my error.
It’s something in my configured Theme
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.
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!
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 MacI just took iframe and html out and it works fine now.
Hi,
very great plugin. Can anyone tell me how i can use it for a normal html-website without any wordpress?
Thanks, Flo
@Flo: Please see the Shadobox authors site at http://mjijackson.com/shadowbox for information on how to use Shadowbox without this plugin.
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?
@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.
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
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….
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:
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.
instructions for inline content would be appreciated =)
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?
Nice work.
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
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?
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?
@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.
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.
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
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?
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
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
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
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, ;)
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?
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.
oops, I meant http://www.jeroenwijering.com flash player
Hi. I have encountered a minor problem. The overlay background doesn’t seem to work on Firefox. Any solutions? Thanks!
Shadowbox is now 2.0. Will you update your plugin? It would be so nice…
@Radu Capan: Absolutely! I have been waiting for the 2.0 release so that I could do just that. I am working on another plugin at the moment and another site. Within the next 2 weeks I hope to release an update to Shadowbox-JS. I have some other changes (WP 2.6 related) that need rolled into all of plugins as well. Should be a busy couple of weeks.
Hello Mat;
great plugin, im a big fan of shadowbox…
im using your plugin for a clients blog/site and they want to display the content of a post. Ive been trying to implement the iframe and html method as stated in mjijackson.com, the issue is that the shadowbox wont load, but the specified content does. maybe it could be an issue with the permalinks? im using the default value.
my link would be
<a rel="shadowbox; content="iframe" href="http://localhost/delkes/wordpress/?page_id=5">iframe</a>or
<a rel="shadowbox; content="html" href="http://localhost/delkes/wordpress/?page_id=5">iframe</a>any ideas??
thanks.
P.
I am trying to have the shadowbox display text so i have made a page and linked to it as per below but it is not working.
<a href="http://busyatwork.ignitionmedia.info/employers-faqs/" rel="shadowbox;width=405;height=340" title="Employers FAQs">Employers FAQs</a>Can you please advise how I go about doing this?
Speaking from an SEO standpoint, how do the search engines handle this? Will the search engines pick up the images for their image search?
hello there! great plugin, but my flash shows up in a tiny window… where can i define or change the windows size? thank you very much!
cheers, M.
Hi there,
I am struggling with trying to get the shadowbox to work in Internet Explorer (go figure) within an instance of wordpress. The link at the bottom of this post: http://neuro-ortho.org/community/2008/07/01/kennedy-brain-surgery-hailed-as-successful/
that reads: “Click here to view another local broadcast by Neurosurgeon, Edward Mkrdichian, MD”
I currently have mootools as the chosen library.
Any suggestions out there?
Thanks,
Mike
hum, i really tried my best, but i don’t know, where i can change the shown picture size after loading in shadowbox?
where can i change this?
thans for your support in advance.
chEErs.
mike.
Your plugin is GREAT!!! Thanks! I was wondering if it is possible to have PDF files come up to be viewed in the shadow box rather than open up to be downloaded or saved.
Thanks in advance for the help.
@Redd
Yes, just put the url to the pdf document in the line of code, and it will work. Typically this should be able to pull up anything that your browser can pull up, you just have to link to it to start with.
@Matt
I love the plugin dude, but I gotta ask, is there any chance we can expect to see some better integration with WP? As it is now, as you know, I have to put the code in each time I want to use it. It would be nice if the code could be given a quicktag, which would further reduce the chance of someone editing in visual with this plugin since quicktags like I want are only good in html mode. So, can you make it work just like the code quicktag does on the html editor? It could put in the opening half of the href, with the rel attribute already set as shadowbox, but the url blank. How bout it?
@mike
I clicked your link and the page froze, though my browser didn’t (safari on WinXP), just as it did a few minutes before when I clicked the links to the screenshots on this page. I was confused by the source on this page because it has rel=”shadowbox[shadowbox]” set, seems redundant.
On your site though, I took your link code and put it on my site, and it worked like a charm, a video of some older dude talking. Makes me think you either have the wrong js library selected, or there is just a problem with it. Try changing the $jslib variable to jquery or prototype, though none seems to be working the best for me with quick loads.
It is a config problem tho because your link worked perfect, I just copied and pasted it. Hope that helps.
@Nicole
I copied and pasted the code you posted, and it works just fine. The page is a 404 inside your site, but it loads just fine after a few extra seconds of a black screen, probably just load time.
Try switching the js library between none, prototype, and jquery, see if that helps.
@Bryson, I did what you said but it just gives the prompt to download the PDF it does not open it on the screen. Any tips about this? Thanks!
@Redd: This is due to the way that browsers handle PDFs. The browser itself cannot handle the PDF so you use a plugin such as the Adobe Acrobat Reader to display the PDF. If the browser could handle the PDF natively or if shadowbox came with some sort of PDF “player” to show the PDF in shadowbox then it would work…but unfortunately due to the design of how PDFs are displayed, in its current form, Shadowbox will not display this as you want.
@Matt, Thanks so much for the helpful tips. Right now I have changed the PDF into an image and I am trying to get the image large enough to show clearly on the shadowbox; it seems as though no matter how large I change the image size it doesn’t really change how it shows?
Hi Matt,
running Shadowbox and swfobject together in WP causes problems with the display of Flash objects in Firefox 2 (Win). The solution seems to be the setting wmode to “opaque” as
mentioned in http://www.nabble.com/FireFox-PC-Issue-td18623795.html
So my question: where goes the setting wmode=”opaque” in the shadowbox JS ?
@Thomas: You set wmode=”opaque” in swfobject and not in Shadowbox. A quick search on google brought me to this page.
Does shadowbox play nicely with the [gallery] shortcode?
(By “nicely” I’m wondering if it displays images in a gallery as shadowbox’d images)
@Erigami: Currently the plugin does not handle this. I am debating whether or not to include this functionality in the Shadowbox JS plugin or to release a more generic plugin to assist in adding any kind of effect to the gallery links. I will keep you updated and will perhaps send you a beta version of the plugin to test.
GREAT Wordpress plug-in. Works great with NextGEN-gallery. You have to choose custom under options/effect and then use this code rel=”shadowbox[%GALLERY_NAME%]“.
I was wondering if this plug-in can view a whole gallery?
Now it can only display the pics on the page that its on. Example: I have a gallery that is 3pics x 4pics so 12 pics and continues for 3 more pages making the total pics 36. It only lets me view the first 12 pics. I would like to view all 36 pics without going to the next page. Hope you can help.
Thanks,
Mike B
@Mikeb: Shadowbox works by looking at the DOM and finding all of the links that contain the rel=”shadowbox[gallery_name]” and uses that for its gallery capabilities. If your gallery is paginated and not all links are displayed on one page it has no idea about the other links.
So in short there is no way to achieve what you are trying without placing all of the links on 1 page.
Thanks for responding, great looking lightbox alternative, I think it looks better than and of the lightbox alternative.
Thanks:)
Lovelyplugin :D Good to see it works with my theme ! (as lightbox doesnt :S) THanx :D
Hi there! Lovely plugin. It works really great with my gallery.
Hello! I love this plugin and cannot imagine using anything else.
I really enjoy your plugin.
Best plugin of its kind, period. Keep up the good work.
Great plugin, I use it on several websites.
Great plugin!
Hi Matt,
I’m a fan of Shadowbox.js so I really appreciate you writing this plugin for WordPress. I’ve gone through quite a few plugins and this one contains the features that I want/need.
Great work indeed. I love this plugin. Can’t wait for the new version!
Great plugin!
I hope the new version will allow options to be set via the admin panel instead of editing the php :)
Cheers.
Great plugin, I use it on my websites
Personally i think that the size of the embedded youtube movies should be change to the new standard size on Youtube, which is 560×543.
If anyone wishes to change this (so it is standard) it can be done in the file shadowbox-js.php.
$tube_rel_attr = 'rel=$2shadowbox[post-' . $post->ID . '];width=560;height=345;$7';
@Søren: I’ll keep this in mind for my next release. The current size is based on the default configuration of Shadowbox. Perhaps making the video size configurable is a possibility as well.
Outstanding plugin…fantastic. Thank you for all your time and hard work.
Great Plugin!
Hi,
Great plugin, just added it to my blog.
Thx for plugin! very very fun!
Hi everybody,
fisrt, thanks to matt for this great plugin.
l am trying to implement the plugin for opening a demo site inside my domain
for example:
my domain name ei mydomain.com and l want to show a demo site inside mydomain.com like mydomain.com/demo/newsite
and nothing happen, just go to the url with out use the plugin.
thanks in advance,
Chiico
is any way to open
@Chiico: Please take a look at this forum topic that describes how to get this to work: http://forum.sivel.net/viewtopic.php?id=26
Your are great !
Yes is working now …. here is the code to open from the same site with image:
<a href="http://sivel.net/2008/02/shadowbox-js/" title="test" rel="shadowbox;player=iframe;"><img src="http://www.e-muskarac.com/files/google.jpg"/>Thank you so much for this plugin! I have been using shadowbox on a site that was previously static and I am now using this plugin on the WP framework. I like shadowbox the best of all the JS tools for this purpose that I have found. Keep up the good work!
Excellent plugin. Any chance you will include .f4v video files?
This plugin and shadowbox.js uses the JW FLV player. The JW FLV player does not support f4v videos. So until the player supports it the plugin cannot support it.
Hi there! I’m new with your plugin, I’m using it because I’m really tired of wasting my time with manual configurations of shadowbox and so on…I think you did a very great job with this plugin…but…In my weblog I also use the dbx (docking boxes) script, and it gave up working since I’ve installed your plugin. It was ok with my “classic” shadowbox configuration…so, I thought it was my fault, maybe some misconfiguration in my hand-made wp-theme. So I finally decided to try with a very famous and well-made theme: i-theme. The error it’s the same, and dbx (or shadowbox) stop working (the first in the html code stops). Could you please think about it? Thank you for your job anyway! Byez.
@-FrA-:
Try switching the Javascript Library used by Shadbowbox by browsing to Settings->Shadowbox JS, selecting jQuery from the Javascript Library drop down and then clicking Save Changes. Seems to work for me in my tests with the iTheme.
Thank you very much! I finally found that the problem was due to technorati’s authority java applet…
Take care.
-FrA-
This works great, thank you for developing such an easy and wonderful tool. What would it take to accomplish this same effect but with blocks of text?
hi,
this plugin is very useful for my website!
btw, I wanna know how to change the setting
to make the image be shown bigger than the browser size.
tks!
@Law: You can change how shadowbox handles images that are larger than the display area by clicking the “Show Advanced Configuration” button on the Shadowbox JS options page at Settings->Shadowbox JS in the WordPress Admin. The value you would need to change is “Handle Oversize”. There is a description of the options under that drop down.
Love this plug-in, thanks. Question- I am having difficulty with getting my qtime .mov files to play at size. ShadowBox downsizes them into little players. Thoughts?
Please see http://forum.sivel.net/viewtopic.php?id=97
I’ve got a quick question re: how the plugin displays a .mov file. I’ve got a video that is 720×450. However, when the plugin opens it up (which works perfectly fine), the size is quite small (not the actual video size). However, when I change the Shadowbox skin to none (and the video is opened up in another window), the size is displayed correctly. Am I missing some setting that allows me to set the lightbox to the size of the file?
Please see the topic in the forum that discusses this http://forum.sivel.net/viewtopic.php?id=97
thanks much (I should have looked in the support forum)
woot woot shadowbox now supports IE8 yay going to update now!
I updated the plugin to 3.00. After activating, the Shadowbox did not show in my settings area and it stopped working for my whole site. Any pointers on this???
@Maz: Likely you are using PHP 4. PHP 4 support was dropped in this release in favor of better functionality. Please consider upgrading to PHP 5.
Please reconsider your removal of PHP4 support in v3.0, as some of us do not have the option to force our hosting providers to upgrade to PHP5.
@Alex: Unfortunately, in order to make improvements sometimes we have to drop backwards compatibility. PHP 4 users can still use any version prior to 3.0.0.0. Previous versions can be downloaded from http://wordpress.org/extend/plugins/shadowbox-js/download/
PHP 4 has been end of life for almost a year now and WordPress itself will be dropping PHP4 support within 6-12 months in all likelihood. Apologies for the inconvenience.
Dude i love this plugin, I’ve been using it for a while…
I love most of the v3.0 improvements…
I’m just wondering why you seem to have got rid of the spinning ‘loading’ symbol? – I don’t have the fastest of servers, and some of my images are quite large, so a gallery can take quite a few moments to load after someone has clicked the first image… at least before they saw the spinning symbol and knew to wait… now they just end up looking at an onimous looking black rectangle with no indication that anything is happening
Was this an oversight, or part of the streamlining of code? – Is there any chance this could be made an option (on or off) in a future update?
Other than that… Many thanks for all your hard work in bringing this great script to us Wordpress users. :)
@Adam: The removal of the loading image was not of my doing. While I did make large code modifications to the plugin I do not have any code control over the shadowbox.js code. It would seem that the author or shadowbox.js had made a decision to remove this image.
Feel free to make a recommendation on the Shadowbox forums at http://www.shadowbox-js.com/ to bring the loading image back. Shadowbox itself is still in 3.0b1 release so there should still be room for changes before it’s final release.
Version 3.0.0.0 of this plugin added some nice features for WordPress 2.8, and with WordPress 2.8 being released later today I made the decision to release it using the 3.0b1 shadowbox.js release as there are no current bugs with it. I will be updating this plugin as updates to the shadowbox.js code are released.
Many thanks for the clarification and quick reply Matt, much appreciated
I just installed this plugin in WordPress 2.7.1 and activated it. But like another user mentioned, when I go to “Settings” I do not see an link for “Shadowbox JS”. Any idea why this is not displaying?
@Jonathan: And like I told the other user, you are likely using PHP 4. PHP 4 support was dropped in this release in favor of better functionality. Please consider upgrading to PHP 5.
@Matt Thanks for the reminder on the php version. That was indeed the cause and it is now fixed. Thank you for pointing that out.
I absolutely love the 2.4 version of shadowbox. The concept theme was brilliant, the loading quick and clean, the control over opacity without having to hack through the php files was wonderful. Ungraded to 3.0.0 and the concept theme was gone, the effect stopped working at all. I’m not sure what the interaction is – likely this is something in the theme, or in the coding of the pages I’ll have to debug at some point. For now I’m staying back at 2.4. Sigh.
But thanks for an excellent plugin.
The skinning capability shadowbox.js was changed in the upstream release of shadowbox.js. Due to these changes the previous skins will no longer function. You may need to, after upgrading to 3.0.0.0, go to the Shadowbox JS settings page and set “Reset to Defaults” to “true” and click save changes.
I honestly find this plugin to be better than any other plugin available so far. I like it even better than next-gen gallery to be honest. So simple to use, and it works automatically.
I love this plugin. Just have a quick question thought that I haven’t been able to find the answer too. I’ve got a video that I’ve encoded in mp4 because I like it better than flv for a variety of reasons. Shadowbox automatically wants to load it in Quicktime although JW FLV Player will play them. Is there anyway to force Shadowbox to open mp4 files in the JW FLV player?
@Jeremy Brunson: Yes…simply format the rel attribute so that it looks like:
rel="shadowbox;player=flv;"Thanks! Worked great!
Really usefull, easy to implement and no more trouble with other frameworks! ;) Thanks, a lot.
Matt, thanks for making such an elegant and functional plugin!! One of the top 10 WP plugins imo. Any chance of seeing a ‘full screen’ (not counting youtube player) option in an upcoming update?
How I can tweak the plug so that it will play “m4v” files through the JW video player.
Thanks for all the amazing work on this plugin.
@Benjamin: As noted previously…http://sivel.net/wordpress/shadowbox-js/comment-page-3/#comment-3613
Nice! Thanks.
However, when I add “rel=”shadowbox;player=flv;” the Shadow box engages, the screen grows dim, but the played doesn’t appear. I can click anywhere to close shadow box, but nothing else happens.
Do I have to declare dimensions or some other attribute somewhere else?
Again, I’m using M4V files, which are just Quicktimes.
@Benjamin: please make sure you have enabled FLV support from the settings page of this plugin. By default the FLV player is disabled.
Matt,
thx for the help & the plugin… I am trying to implement Shadowbox w/ NextGen under options/effects and I use this -> rel=”shadowbox[%GALLERY_NAME%]“
I am not getting any effect, the images are loading on their own page. It seems this should be easy but I can’t seem to get it to work…any ideas?
here is an example page: http://www.hificartel.com/photos/girls-boys-steve-aoki/
@Oliver: It look like it is not working because of an incompatibility in your theme. Please see this forum topic for information on how to get it working: http://forum.sivel.net/viewtopic.php?id=71
Love the plugin – just wanted to mention a conflict that I had encountered.
Using the WP-SWFObject plugin v2.3 ( http://blog.unijimpe.net/wp-swfobject/ ) creates a conflict with the Shadowbox.close() call after opening an FLV file in JW Player. Something to do with the way it unloads the SWF content, but I stopped trouble-shooting once I found the cause (and deactivated the WP-SWFObject plugin).
Kick Ass! Thanks for the plugins, you’re the best!
Very cool plugin ; thanks !
I am looking forward to the next update. Hopefully they will bring back to the loading animation.
I have been started to prepaire the Translation for Shadowbox in it’s own directory. So it means that I have added the rule
load_plugin_textdomain(’shadowbox-js’, “/wp-content/plugins/shadowbox-js/”); to shadowbox-js.php end added in al the rules where is i have edit it in
I am still busy with it, but if the translation is finished, can i send it to you for other users, so they can also translate it in their own language in the shadowbox directory? If you like to, i will also make a .pot file
If your answer is ‘yes’, to where can i send the files?
With regards
Anja.
I believe you have gone through a lot of unnecessary work. This plugin already has a localization directory with a template/pot file in it. In addition in inc/admin.php there is already load_plugin_textdomain. In the localization directory you will even find a Russian po and mo file. More to this, you should have not left a comment concerning this you should have used the forum as you should have read since you agreed to the comment guidelines.
Really perfect plugin!
Love this plugin. Use it all over my site!
What if I, intentionally, do NOT want a specific image to open in the Shadowbox? For instance, if I want to use that image for navigation?
@Ondrej: If you are using using Shadowbox globally for all images but have an image you do not wish to use Shadowbox on use
rel="nobox"in your image link. See the usage section for more details on usage.Wow! Thank you for super-fast response Matt!
I love the latest version ( 3.0.0.2 ). Works perfect!!
Had some problems before within IE, not loading plugin on first page, only working on single posts, but now IT’S WORKING GREAT! Thanks!
How do you get the shadowbox to work with images that you have “hardcoded” into the wordpress loop? For some reason none of my images will open in a shadowbox they just go to the image link on a new page. I didn’t know if there was something I needed to be doing on my wordpress template page to make the shadowbox work.
Thanks,
You would need to add
rel="shadowbox"to the link. See the usage section for more information.Howdy,
This plugin I just install is great. It gives may blog an new look that I was looking for. It took me some time to get the setting right, but I must say it’s an awesome software.
Antonio Coleman ‘TrafficColeman” Signing Off
Hi Matt,
your shadowbox plugin works great, but I have to use 3.0.0.1, because after I update to 3.0.0.2 or 3.0.0.3, the wordpress blog stops working in Internet Explorer 6. It simply won’t load the main page. Don’t you have an idea, why or how to solve it?
Thanks a lot!
@Norguad: I believe this is due to 3.0.0.2 and 3.0.0.3 using shadowbox.js rc1. Version 3.0.2 will contain shadowbox.js 3.0.2 which has a number of fixes in it. There should be an update within the next several weeks.