Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

video gallery not working...


Go to End


6 Posts   2649 Views

Avatar
JPG

Community Member, 53 Posts

14 February 2011 at 8:13am

Edited: 14/02/2011 8:16am

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

Avatar
JPG

Community Member, 53 Posts

15 February 2011 at 1:06pm

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/

Avatar
Ryan M.

Community Member, 309 Posts

16 February 2011 at 5:48pm

Edited: 16/02/2011 5:49pm

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. =)

Avatar
JPG

Community Member, 53 Posts

16 February 2011 at 9:32pm

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

Avatar
JPG

Community Member, 53 Posts

17 February 2011 at 11:36am

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");
        });						
			

:(

Avatar
Ryan M.

Community Member, 309 Posts

17 February 2011 at 12:31pm

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!