Comments

1. Posted by david on Wednesday 27th February

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

2. 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. 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. Posted by Josh on Thursday 28th February

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

5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Posted by Babak on Thursday 6th March

    thank you!

18. 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. 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. Posted by Arun on Monday 10th March

    Thank you for this brilliant plugin :)

21. 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. 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. 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. 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. 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. 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. 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. Posted by Josh on Thursday 13th March

    That worked! Thanks!

29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Posted by volderette on Tuesday 25th March

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

40. 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. 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. 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. 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. 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. 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. 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. 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. Posted by Rob on Thursday 27th March

    Great. Thanks for the quick reply.

    Rob

49. 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. 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. 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. 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. 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. Posted by Steve on Tuesday 1st April

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

55. 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. Posted by Steve on Tuesday 1st April

    Nope, that didn’t do anything.

57. 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. Posted by chris on Monday 7th April

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

59. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Posted by Karen of Scottsdale on Monday 28th April

    instructions for inline content would be appreciated =)

71. 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. Posted by Joseph on Monday 12th May

    Nice work.

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

Leave a reply