• luke
  • Member
  • Offline
  • Registered: 2018-01-25
  • Posts: 5

Topic: Embedding JB Gallery (php and inc) [SOLVED]

Hi,

My apologies in advance if this is a noob question... I am attempting to embed a Juicebox gallery on to the following website (the gallery would replace everything below the strip menu):
http://biopartner.co.uk/

I have read the tutorials on embedding but it simply doesn't work for me. Instead it completely takes over the page every time. I think the problem may stem from how our pages are coded.

The top half of the page is included on every page site-wide using .inc pages. These are used within the .php page format like css is (that's my understanding) but I've found no info on whether Juicebox will work with the file types. Below I provide code from a test page I've been putting together; if anyone can point out what my error is I would be immensely grateful:

<?php
        $strMain = 1; // banner and menubar to display
        $strSideNav = 1; // Side nav to display
                include('includes/header.inc');
                include('includes/main.inc');

    ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>BIO-Europe 2017</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="description" content="" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="BIO-Europe 2017" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:description" content="" />
    <!-- END OPEN GRAPH TAGS-->

    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: 'rgba(255,255,255,1)'
    });
    </script>
    <div id="juicebox-container">
            <!-- Image gallery content for non-javascript devices -->
            <noscript>

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

Re: Embedding JB Gallery (php and inc) [SOLVED]

A Juicebox gallery can certainly be embedded into a PHP page.
In a regular PHP web page, all you need to do is close the existing PHP section with ?>, insert the Juicebox embedding code (where you want the gallery to be displayed in your page) and then open a new PHP section (for the rest of your PHP code) with <?php.

Without knowing what code is included in your 'header.inc and 'main.inc' files, I really have no way of knowing how your web page is constructed. (Even looking at your live web page does not let me know what code is in these files.)

However, here are a few pointers which may help.

(1) It looks like your 'header.inc' file may start your web page with a DOCTYPE Declaration and an opening <html> tag (and your 'main.inc' file may end your web page). If this is, indeed, the case, then you would not need to use the gallery's complete 'index.html' file. All you would need to use is the embedding code (presented on JuiceboxBuilder-Pro's 'Publish' tab and also noted in the Juicebox Embedding Guide here).

(2) If your gallery is not nested inside any parent containers, then you might like to change the dimensions of your gallery. Try changing your galleryHeight from '100%' to '600px' (but leave the galleryWidth at 100%) to see if this helps with the size of the gallery on your web page.

(3) If you want your gallery to be displayed below the 'header.inc' content and above the 'main.inc' content, then try the following:

<?php
    $strMain = 1; // banner and menubar to display
    $strSideNav = 1; // Side nav to display
    include('includes/header.inc');
?>

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

<?php
    include('includes/main.inc');
?>

(You'd also need to upload the contents of your gallery folder to the directory that contains the web page with the embedding code, as noted in the Juicebox Embedding Guide link above.)

I hope this points you in the right direction.

  • luke
  • Member
  • Offline
  • Registered: 2018-01-25
  • Posts: 5

Re: Embedding JB Gallery (php and inc) [SOLVED]

Hi Steven,

Thanks for all your useful information. You've given me the tools to get the php's and inc's linked to our site! For now I'm good to go. Keep up the great work.

Luke

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

Re: Embedding JB Gallery (php and inc) [SOLVED]

You're welcome!
I hope you get on OK.
If you run into any difficulties, please let me know and I'll do my best to help you out.