How to (make best) use external js library from html object (need help from dev)

Report · May 15, 2013

Ok, on another discussion about rotating full screen backgrounds slideshows, i was orientated to try a small lib named "backstrech"

I throw myself in, and i really like what we can do with it.

To use it simply, just make an html object and paste this in :

<script src="http://musecdn2.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="assets/jquery.backstretch.min.js" type="text/javascript"></script>
<script>
  $.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});
</script>

then add the jquery.backstretch.min.js to your "downloaded files" (file menu > files to download)

And you’re done.

Now, i need some help from better developers.

As you can see, my first line is a call to jquery, the same that we find later in Muse exported code.

Reason 1 : without this line, jquery is not defined and the plugin won’t work.

This raises 2 issues :

- We load twice the same ressource which is useless (100k)

- loading js is all about having the page hangs while it loads, hence, they are put at the end of the body.

Does anybody know a way to load this particular html script AFTER we are sure the muse scripts (esp. jquery) have been loaded ?

(in the Edge Animate world, i’d go for the yepnope, and put it at the right place in the code, though, here i have no access to page load structure except head)

PS : in addition to that, i made an exported page/excluded from navigation where i put all the images i wanted for the background, i could then simply change the images lines :

, "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"

to

, "images/my_image_name_as_in_ressources.jpg"

Report · May 16, 2013

Maybe something like this would help (though I didn't test it):

Go to Page Properties -> Metadata -> HTML for Head:

window.onload = function() {

//Load the plugin:

var head= document.getElementsByTagName('head')[0];

var script= document.createElement('script');

script.type= 'text/javascript';

script.src= 'assets/jquery.backstretch.min.js';

head.appendChild(script);

$.backstretch(["http://dl.dropbox.com/u/515046/www outside.jpg", "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg", "http://dl.dropbox.com/u/515046/www/cheers.jpg"],

{duration: 3000, fade: 750});

}; //Window OnLoad

</script>

Report · May 16, 2013

Sorry but dont work.

Report · May 16, 2013

Got it, there was a bug in my code. Here is what you do:

1. Download the js file https://raw.github.com/srobbin/jquery-backstretch/master/jquery.backstretch.min.js

2. In Muse: Go to File -> Add Files for Upload and add the script file

3. Open Page Properties -> Metadata -> HTML for <Head>

Paste this code in:

window.onload = function() {

var loaded = function() {

$.backstretch([

"http://dl.dropbox.com/u/515046/www/outside.jpg"

, "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"

, "http://dl.dropbox.com/u/515046/www/cheers.jpg"

], {duration: 3000, fade: 750});

}

//Load the plugin:

var head= document.getElementsByTagName('head')[0];

var script= document.createElement('script');

script.type= 'text/javascript';

script.onreadystatechange = loaded;

script.onload = loaded;

script.src= 'assets/jquery.backstretch.min.js';

head.appendChild(script);

}; //Window OnLoad

</script>

4. Preview or Publish = Done!

Example: http://musebackstretch.businesscatalyst.com/index.html

Report · May 16, 2013

Thank you.

Report · May 17, 2013

Hi Noam

And if i want to display videos as a background?

Can you help me?

thank you.

examples

http://dfcb.github.io/BigVideo.js/

http://www.aaronvanderzwan.com/maximage/examples/html5video.html

http://www.seanmccambridge.com/tubular/

Report · Jun 04, 2013

Anyone ever get full frame video background working? I tried adapting the code from the backstretch.js to apply to bigvideo.js but no luck.

Report · Jun 04, 2013

Randy, I don't you should do that. If you want to use bigvideo, then use bigvideo. Am not sure backstretch supports video. Please read the documentation.

Report · Jun 04, 2013

I will advise you use backstretch with cinemagraph technique.

Report · May 17, 2013

Good to know the Muse development team is ready to support our request for fullscreen by temporarily showing us how to integrate jquery plugins with Muse in the most efficient way. Quite appreciated. Thanks NoamAlmosnino. Would this code work for 100% width and height div if I change line 3 to look like this:

$(".myclass or IDname").backstretch([

"http://dl.dropbox.com/u/515046/www/outside.jpg"

, "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"

, "http://dl.dropbox.com/u/515046/www/cheers.jpg"

], {duration: 3000, fade: 750});

....

(See the documentation: https://github.com/srobbin/jquery-backstretch) Good the know a Muse 6.0 is in the making. (6.0.325.220)

Report · May 17, 2013

Just tested it and it worked pefecto! Now we have 100% width slideshow in Muse. The 100% height is still an issue in Muse yet unresolved. Once again thanks

Report · Oct 24, 2013

Thanks so much for the helpful advice so far, i managed to implement the plugin and it works just fine both for background slideshows and for divs.
What i'd like to achieve now is a changing the background of the website by hovering over a tooltip / image, like it was done here: http://www.powerhouse-company.com/selected_projects.html
So i guess the script has to be triggered by hovering over a certain area. Any ideas on how this could be done are highly appreciated!

cheers,

Rabauke

Report · Jun 05, 2013

Hi Noam, please am using backstretch with a cinemagraph technique to create a pseudo fullscreen video. Everything works fine. Just that I want the slideshow to stop after the last image file.

I found this in the repository on how to pause it. Please how can insert this into the code you provided.

$.data('backstretch').pause();

Please help.

Kind regards

Report · Jun 05, 2013

Hi topelovely.

Can you share the cinemagraph technique?

Thank you

Report · Jun 05, 2013

Fullscreen video in Muse (Using Cinemagraphs):

http://fullscreenvideoinmuse.vivovecompany.com/index.html

You'll also require photoshop to generate the sequence from the video (Just import/drag the video into photoshop and render the movie, select photoshop sequence)

Enjoy. I just hope someone will help me out on my own request.

Report · Jun 05, 2013

I have been able to solve this. This will stop backstretch at the last frame of the slideshow

window.onload = function() {

var loaded = function() {

$.backstretch([

"http://dl.dropbox.com/u/515046/www/outside.jpg"

, "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"

, "http://dl.dropbox.com/u/515046/www/cheers.jpg"

], {duration: 3000, fade: 750});

$(window).on("backstretch.show", function (e, instance) {

if (instance.index === instance.images.length - 1) {

instance.pause();

};

});

}

// Load the plugin.

...

Report · Jun 12, 2013

Anyone able to get Big Video to work in Muse?

http://dfcb.github.io/BigVideo.js/

I've tried every combination I can think of as far as "Add files for Upload" with the all the .js files and then adding the html to the "Page Properties > Metadata > Head" and loading the plugin. I love the idea of using the Cinemagraphs but I need audio as well and have used Big Video in other projects outside of Muse, but I would love to use it in Muse.

Report · Jun 13, 2013

I also like to know this. Can anyone help?

Report · Jun 13, 2013

Here is an example to get you started.

Note use at your own risk.

http://musebigvideo.businesscatalyst.com/

To use:

Download and open the zip.

Open the Muse File.

Go to the File Menu -> Add Files for Upload -> Add your video (recommend that it's mp4 format).

Open the file: start.js in a text editor -> Add your file name to the first line (you'll see the note in the code).

Save.

Go back to Muse -> Export/Preview in Browser -> Done

Report · Jun 14, 2013

Hi Noam

I followed all the steps, and was unable to work.
It was supposed that his example to work with video in the background?

sorry my english
thank you

Report · Jun 14, 2013

Guvieira, it seems to work on Chrome and Safari for me. Are you using Firefox?

You'll need to create an ogg vresion of the video and modefiy the code in start.js to make that work. See the note on the Big Video JS page.

http://dfcb.github.io/BigVideo.js/

Let me know if that's the case, I can proably update the sample file to demo a page that also works in Firefox.

Thanks!

Report · Jun 14, 2013

I'll check this out. But sweet Noam what do you mean by 'úse at your own risk' - My PC is not going to go up in flames I guess

Report · Jun 14, 2013

Topelovely, just meant that we havn't fully tested this like we do for native features .

Report · Jun 14, 2013

HI Noam

My browser is firefox.

I made the video ogg and modify the code in start.js

and dont work.

Can you help me?

Thank you

Report · Jun 14, 2013

OK Noam, tested it.

Observation: It doesn't play my own video. It only plays this video: http://video-js.zencoder.com/oceans-clip.mp4

I think the confusion is in this line of code:

var url = videoURL == "assets/myvideo.mp4" ? "http://video-js.zencoder.com/oceans-clip.mp4" : videoUrl; // What is this suppose to do? Play a series of video or what. I even tried deleting the ocean-clip.mp4 url. Are you saying this only works when published online? But I don't want the ocean-clip video how can I remove to show only my video.

In the first line this is what I did:

var videoURL = "assets/myvideo.mp4";

Can this line of code where the head is italicised be assigned to a block element like a div:

$("<link/>", {rel: "stylesheet",type: "text/css",href: "assets/bigvideo.css"}).appendTo("head");

Can I have like this: $("<link/>", {rel: "stylesheet",type: "text/css",href: "assets/bigvideo.css"}).appendTo(".mydiv"); // Not a code guru.

Kind regards

Adobe Community

How to (make best) use external js library from html object (need help from dev)

Now, i need some help from better developers.