Jump to:

23376 Posts in 18218 Topics by 2867 members

General Questions

SilverStripe Forums » General Questions » video gallery not working...

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1
Go to End
Author Topic: 1551 Views
  • JPG
    Avatar
    Community Member
    53 Posts

    video gallery not working... Link to this post

    Hi... Am trying to get a video gallery to run and am currently in head/wall mode. If anyone can look at this and help out would be hugely appreciated...

    Many thanks... Here is my template page...

    <!-- VIDEO 1 / START -->
    <div class="video_holder">
    <div class="video">
    <% if GalleryThumb1 %>
    <a href="#" rel="#orel1">
    $GalleryThumb1
    </a>
    <% end_if %>

    <% if VideoTitle1 %>
    <div class="info">
    {$VideoTitle1}
    <!--<span>SMALL DESCRIPTION / NOT NEEDED?</span>-->
    </div>
    <% end_if %>
    </div>
    <% if GalleryVideo1 %>
    <div id="orel1" class="overlay"><a href="GalleryVideo1" class="player"></a></div>
    <% end_if %>
    </div>
    <!-- VIDEO 1 / END -->

    <script language="JavaScript">
    $(function() {
    $("a[rel]").overlay({

    effect: 'apple',      
           expose: '#000',            
          
    onLoad: function(content) {
    this.getOverlay().find("a.player").flowplayer(0).load();
    },
          
    onClose: function(content) {
    $f().unload();
    }
    });            
       
       // install flowplayers
       $("a.player").flowplayer("../swf/flowplayer-3.1.5.swf");
    });
    </script>

    The effect is meant to be an overlay that the thumbnail creates playing the video... It seems to work as base HTML but then the directory stuff is all different there. Am I pointing my SWF player into the wrong place? Also is there a conflict with the thumbnail button having nothing in the href tag????

    thanks

  • JPG
    Avatar
    Community Member
    53 Posts

    Re: video gallery not working... Link to this post

    Still have not fixed this - if it's any help, here is a link to page that is not working - any help hugely helpful and appreciated.

    http://sdnadev.thepeopleupstairsdesign.com/projects-2/

  • Ryan M.
    Avatar
    Community Member
    309 Posts

    Re: video gallery not working... Link to this post

    Try moving your js code to an external file. I see you have a global.js file, use that? Then put a <% require javascript(url here) %> tag in your template. That'll also make your relative url (../swf/flowplayer-3.1.5.swf) work. ;) Because the javascript's getting rendered with the template, it also bows to the command of the base href tag. So any urls in templates have to be relative to the site root.

    Actually, you could just try fixing that relative url and see if it works. I just think all js should reside in external files. Makes it a little easier to maintain the code, and it's neater. =)

  • JPG
    Avatar
    Community Member
    53 Posts

    Re: video gallery not working... Link to this post

    Thanks Ryan M.
    Good idea about the relative URL - I think that I did plan to do that eventually but I never thought that the any other the JS would get effected from being in the template. Have done that now and the overlay is (sort of) working, behaving a bit oddly, kind of hanging off the edge of the page, can this be a styling issue? Also on exit it seems to not be completing so I end up having to refresh the page if I want to select another item. It works fine and looks ok from the HTML. The other problem is that now the SWF player is not working - have tried a couple of versions of the url for it to direct to but none seem to work... Do I have to push it's flies back (../../../) a few times or something!!!?

    Here is a reminder of what is in the global JS:

    // OVRLAY FOR FLOWPLAYER
    $(function() {
    $("a[rel]").overlay({

    effect: 'apple',      
           expose: '#000',            
          
    onLoad: function(content) {
    this.getOverlay().find("a.player").flowplayer(0).load();
    },
          
    onClose: function(content) {
    $f().unload();
    }
    });            
       
       // install flowplayers
       $("a.player").flowplayer("swf/flowplayer-3.1.5.swf");
    });         

    Many thanks

    Regards

  • JPG
    Avatar
    Community Member
    53 Posts

    Re: video gallery not working... Link to this post

    Also, just realised - adding the script to my global code has stopped the home page from working, now the rotator is not working!

    This is the script in my global file;

    $(function($) {
       //
       $.fn.ExpandingMenu = function(user){
          // set defaults
          var defaults = {
             id: "",
             speed : "fast",
             event : "click"
          };
          // extend defaults with user defined settings   
          var values = $.extend(defaults, user);

          // Hide all <ul>(s)
          $(values.id + " div.holder + ul").hide();   
          //show <ul>(s) with 'open' class
          $(values.id + " div.holder.open + ul").show();
          
          // attach the click functions
          $(values.id + "   .holder").bind(values.event,function(){
             // if the <ul> is hidden then unhide it
             if ($("#" + this.id + "+ ul").is(":hidden")) {
                //
                $(values.id + " div.holder").removeClass("open");
                $(values.id + " div.holder p").removeClass("open");
                //
                $("#" + this.id).addClass("open");
                $("#" + this.id + " p").addClass("open");
                //Hide all <ul>(s)
                $(values.id + " div.holder + ul").slideUp(values.speed);
                //
                $("#" + this.id + "+ ul").slideDown(values.speed);
             }      
          });
       };
    });

    //SLIDE-UP FOR HOME PAGE GALLERY
    $(document).ready(function(){
                //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
                //Full Caption Sliding (Hidden to Visible)
                $('.boxgrid.captionfull').hover(function(){
                   $(".cover", this).stop().animate({top:'-85px'},{queue:false,duration:600});
                }, function() {
                   $(".cover", this).stop().animate({top:'100px'},{queue:false,duration:600});
                });
                //Caption Sliding (Partially Hidden to Visible)
                $('.boxgrid.caption').hover(function(){
                   $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
                }, function() {
                   $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
                });
             });
             
             
    // OVERLAY FOR FLOWPLAYER
    $(document).ready(function() {
    $("a[rel]").overlay({

    effect: 'apple',      
           expose: '#000',            
          
    onLoad: function(content) {
    this.getOverlay().find("a.player").flowplayer(0).load();
    },
          
    onClose: function(content) {
    $f().unload();
    }
    });            
       
       // install flowplayers
       $("a.player").flowplayer("swf/flowplayer-3.1.5.swf");
    });                  
             

  • Ryan M.
    Avatar
    Community Member
    309 Posts

    Re: video gallery not working... Link to this post

    I can't actually help you with everything because well, then that would be practically giving away a hour or so of consulting. =)

    However, it does sound like the positioning issues are styling problems, tweak your css or js code. And I don't know where your swf folder is located in relation to the javascript files, so I can't recommend if you should add more levels to the url or not.

    Moving the local code up to the global js folder might have interfered with anything else you might've had in there, leading to your problems with the home page. Try moving it back or finding another solution, such as putting it in its own js file and calling that js file with <% require %> in the template, so that it only gets called on the page that needs it.

    Good luck!

    1551 Views
Page: 1
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.