Jump to:

3434 Posts in 1026 Topics by 866 members

Template Questions

SilverStripe Forums » Template Questions » fancybox or shadowbox not showing

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2
Go to End
Author Topic: 7967 Views
  • theAlien
    Avatar
    Community Member
    131 Posts

    fancybox or shadowbox not showing Link to this post

    I'm quite desperate... All day I'm trying to get fancybox (or shadowbox) working. But I can't get my head around it.
    The main goal: opening inline HTML-elements, external links and forms in a modal (pictures are a nice addon ;-) )

    But whatever I'm trying: the content still opens as a normal link (or with the inline-elements: the screen moves to the anchor).

    Things I've done:
    * hardcoding all necessary javascript and css-files into templates/page.ss (on top of the body, on the bottom, in the head)
    * disabling all other .js-functionality as is suggested here http://silverstripe.org/archive/show/187021?start=0#post187321
    * enabling all other .js-functionality
    * enabling all other .js functionality except prototype.js as UncleCheese is doing in the ImageGallery-module
    * including all necessary javascript and css-files with public function init() { Requirements::javascript(..); }
    * restarting wampserver as well as way too many /db/builds
    * I even plainly copied what UncleCheese did in the ImageGallery-module (off course without any luck)

    Oh, and off course I had $(document).ready(function() { }); as a part of the necessary javascript-files and all the tags fancybox and shadowbox require added to the <a>

    Is there someone out there who got a modal working and can help me out?
    Or maybe it's a wamp-problem?

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: fancybox or shadowbox not showing Link to this post

    I had shadowbox working without a problem on wamp. It was on 2.23 so I had all the java stuff in my innit() function, but anyway it should still work.

    function init() {
          
             Requirements::javascript("articles/shadowbox/shadowbox-base.js");
             Requirements::javascript("articles/shadowbox/shadowbox-2.0.js");
       
             Requirements::customScript(<<<JS
             
             Shadowbox.loadSkin('classic', 'shadowbox/shadowbox/skin');
             Shadowbox.loadLanguage('en', 'shadowbox/shadowbox/lang');
             Shadowbox.loadPlayer(['qt'], 'shadowbox/shadowbox/player');
       
             window.onload = function(){
       
           Shadowbox.init();
       
             };
       
    JS
       );
             parent::init();
       }

    Attached is the shadowbox version I used.
    Also don't forget to add the viewers you need, I only had quicktime in this example

    Attached Files
  • theAlien
    Avatar
    Community Member
    131 Posts

    Re: fancybox or shadowbox not showing Link to this post

    Thank you.

    I'm on 2.3.0 and still putting things like that as requirements in init().
    Are you suggesting that's not the preferred solution anymore?

    I read something about <% required %> tags, but I can't find documentation on it...

  • jovoo
    Avatar
    Community Member
    12 Posts

    Re: fancybox or shadowbox not showing Link to this post

    Hey theAlien,

    did you fix your problem? I'm trying the same at the moment (fancybox with an inline element) - it doesn't work out...
    There is still this anchor-problem. The page is like jumping but thats all.
    Would be great if you have a hint for me!

    Cheers,
    jovoo

  • emil.blume
    Avatar
    Community Member
    11 Posts

    Re: fancybox or shadowbox not showing Link to this post

    It would be in general very usefull to have a tutorial how to implement some lightbox or fancybox or shadowbox in the best way

  • kuenkuen82
    Avatar
    Community Member
    41 Posts

    Re: fancybox or shadowbox not showing Link to this post

    I found an error and posted on Problem with Silverstripe working with Fancybox forum I'm not sure if this is the cause of this jquery plugin not working, but I would be grateful is someone would post the solution

  • tchintchie
    Avatar
    Community Member
    63 Posts

    Re: fancybox or shadowbox not showing Link to this post

    Hi all!

    I know this thread is quite old but I still hope to get some replies. I too have the problem of a non-working shadowbox (outside of image_gallery module - all works fine there) but I also need to link one or two images outside of the gallery module to open up in a shadowbox (if possible)

    what I did was:
    - downloading the latest shadowbox and putting it into my mysite/javascript folder
    - put this <% require javascript(mysite/javascript/shadowbox-3.0.3/shadowbox.js) %> into my page.ss head underneath other js code like cufon (which works like a charm btw)
    - in my backend I used a html-dialog to code the shadowbox gallery where I wanted it to be like so:

    <a rel="shadowbox[bus]" href="/assets/Uploads/bus/dsc_7413-503.jpg"><img src="assets/Uploads/dsc7419-506.jpg" alt="Scania Irizar PB" width="90" height="90" align="right" /></a>

    when all of that didn´t work (the linked image opens in a new window) I searched the forums and found a threat about some init () commands. that´s when I tried putting this:

    Requirements::javascript("mysite/javascript/shadowbox-3.0.3/shadowbox.js");

    in my page.php underneath the parent::init(); but still without success....what am I doing wrong? Or am I doing anything right at all??? pls help!

    kind regards

  • Invader_Zim
    Avatar
    Community Member
    141 Posts

    Re: fancybox or shadowbox not showing Link to this post

    Hi tchintchie.

    I'm not experienced with shadowbox, but i think you forgot to insert it's init function...

    <script type="text/javascript">
    Shadowbox.init();
    </script>

    Description here

    Cheers
    Christian

    7967 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.