• Registered: 2013-11-13
  • Posts: 8

Topic: Embedding a slider into my website

Hi to all.

I'm probably not as familiar with html5 as most here so i need some help please.

I am a registered user of juicebox [jb] and up til now just create a slider that's used in its own page. But I want to use jb slider that fits into a responsive web page im working on. Currently the page has a static jpg sitting there so i want to simply substitute the static image for the jb-slider. How do i do that please?

The page i'm referring to is here http://movingmemories.com.au/t/mm-ex/index.html

please note: i want the site to remain fully responsive


thanks in advance

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Embedding a slider into my website

It would be a little difficult to simply replace the image that is currently on your web page with a Juicebox gallery.
The image you refer to is not displayed with a standard HTML <img> tag but is actually a background (set via CSS) for a <div> which contains other content (such as your navigation menu).
If you replaced this <div> with a Juicebox gallery, then you would lose all its content.
I would recommend that you keep the 'header-wrapper' <div> in place, remove the background image by deleting the following entries from the #header-wrapper section in your styles.css file:

background: url('../sydney-wedding-photography-images/sydney-wedding-photo-video-sydney-harbour.jpg');
background-size: cover;
background-position: top center;
background-image: url(../sydney-wedding-photography-images/sydney-wedding-photo-video-sydney-harbour.jpg);

... and embed your Juicebox gallery (following the instructions in the Embedding Guide) below your <nav id="nav"> or your <header id="header"> section.

I would recommend that you embed your gallery using the baseUrl method of embedding as documented here. This method of embedding allows you to keep the gallery files inside the gallery folder and you would upload the entire gallery folder (not just the contents) to your web server. Also, it does not matter where on your web server you upload your gallery folder to as long as the paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

As an example, if you have a gallery folder named 'my_gallery_folder' and you upload the entire gallery folder to your web site's root directory, then you would be able to use the following embedding code. (This code could be used in any page throughout your web site without modification. The leading slashes in the paths denote your root directory.)

<!--START JUICEBOX EMBED-->
<script src="/my_gallery_folder/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "/my_gallery_folder/",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

If you want to leave your current home page in place whilst you try things out, just make a copy your 'index.html' file (in the same directory) and use the copy as a work in progress.
Your 'header-wrapper' <div> currently has a fixed height (the image does not scale when you change the browser window's height) but is responsive horizontally so to do likewise with your gallery, just give your gallery a fixed height and a width of 100%.

I hope this helps.

  • Registered: 2013-11-13
  • Posts: 8

Re: Embedding a slider into my website

Hi Steven,
thanks for your very detailed answer. I think I get most of what you mean and I have tried to follow  your suggestions but i think i'm still missing something. please have a look.
FYI
page is at http://movingmemories.com.au/t/mm-ex/index.html

I'm using a sample slider i compiled, its at http://www.movingmemories.com.au/t/mm-e … index.html


thanks again.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Embedding a slider into my website

You're just about there. However, the paths in your embedding code are incorrect (the baseUrl chould point towards the gallery folder and the path to the 'juicebox.js' should be within your gallery folder) and you need a comma after the baseUrl entry in the embedding code (so that the JavaScript picks up all the other options after it).
Just change:

<!--START JUICEBOX EMBED-->
<script src="/sliders/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: "/sliders/jb-slider-01/"
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(18,18,18,1)"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

.. to the following (the paths I have used below are relative to your '/t/mm-ex/index.html' page):

<!--START JUICEBOX EMBED-->
<script src="sliders/jb-slider-01/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "sliders/jb-slider-01/",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(18,18,18,1)"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

You might find that you need to change the gallery's height to a fixed value. Please see this note regarding Using Percentage Heights.
Once you get it working, you can delete the other two lots of embedding code on your web page (which are currently commented out) above the embedding code which is active.