Topic: small slider on demo page big responsive when licked

I have this slider
http://www.countyfairgrounds.net/colora … rado.php#1

OKAY, now I can take off the googel adsense ad and menu - no problem I am trying to achieve the affect you have with this slider on you demo page
http://www.juicebox.net/demos/pro/full/#4

now on the demo page http://www.juicebox.net/demos/  it is small - I would like to do exactly the same thing with my slider - and put it on http:ww.countyfairgrounds.net/colorado/colorado.php

can you please please tell me how you did this?

Re: small slider on demo page big responsive when licked

It sounds like you are looking to have a small image link to your gallery on your main web page.

There are a couple of things you could do.

(1) Embed the gallery in your main page and set showSplashPage="ALWAYS". This will force Juicebox-Pro to displays the Splash Page rather than the gallery itself. The Splash Page is a placeholder for the gallery which, when clicked, will expand the gallery fullscreen. More information about the Splash Page can be found in the Screen Modes support section.
You can configure the Splash Page (to use a specific image and to change the text that is displayed) by using the available Splash Page configuration options (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
Please note that when the Splash Page is clicked, the gallery will expand fullscreen and only the gallery will be displayed. If you want other content to be displayed alongside the gallery, then you will need to implement the next suggestion.

(2) Use a standard HTML image link in your main page to open a page containing your gallery and whatever other content you like. This is essentially what we do on our demo page (but with some extra code to dim the image on hover).
An HTML image link would look something like the following:

<a href="http://www.example.com/gallery/index.html"><img src="http://www.example.com/images/image.jpg" width="100" height="80" alt="image" /></a>

Re: small slider on demo page big responsive when licked

http://www.countyfairgrounds.net/colorado/colorado.php
left column div id juicebox .... I believe I did what you said and the gallery is not there?

Re: small slider on demo page big responsive when licked

The path to the 'juicebox.js' file in your gallery's embedding code is incorrect.
Your gallery uses the following code:

<script src="jbcore/juicebox.js"></script>

... so your 'juicebox.js' file should be located here (but it is not): http://www.countyfairgrounds.net/colora … uicebox.js
Please check the location of your gallery files on your web server and the path to the 'juicebox.js' file.

Re: small slider on demo page big responsive when licked

okay cool - go look now.
Now next question.... can I take this whole set up and put it on other state pages around colorado - eachof our state has its own folder - so I am presuming I can just coupy the code to them?

Re: small slider on demo page big responsive when licked

You could certainly just copy the structure of your colorado page/gallery for each of the other state pages.
To embed a new gallery for a different state, copy the gallery files into the '/state/' folder and use the exact same embedding code (no changes at all) that you use on your 'colorado.php' page on the '/state/state.php' page.

As you plan to have multiple galleries on your web site, you could have all your galleries share a single 'jbcore' folder if you like. Please see here for details.
Essentially, all you would need to do is use a single 'jbcore' folder on your web server and ensure that the path to the 'jbcore/juicebox.js' file is correct in each gallery's embedding code.
This is not necessary at all but it does mean that you would be able to upgrade all the galleries on your web server at once (when a new version of Juicebox is released) by simply replacing a single 'jbcore' folder.

Re: small slider on demo page big responsive when licked

I love you guys and will follow your suggest about the jbcore file now.
One more question..... why can I not put this code and jbcore files inot a word press widget?  I suspect there is an answer - but can you explain more?

Re: small slider on demo page big responsive when licked

If your WordPress widget accepts HTML code (like the standard Text widget does), then there is no reason why you cannot paste your gallery's embedding code in there.
If embedding a gallery into a widget, I would recommend using the baseUrl method of embedding as documented here.
This will prevent problems with knowing where to upload your gallery files to as the baseUrl will define the path to the gallery folder.
Essentially, the baseUrl method allows you to keep all the gallery files inside the gallery folder and you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into your widget. It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.
For example, you could upload a gallery folder (in this example named 'web') to your web space's root directory and paste the following code into your widget.

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

(The leading slash in the paths denotes your root directory.)

Re: small slider on demo page big responsive when licked

thanks for the word press widget information - ah, I just expected you to say NO.....did not think you'd come up with a solution. and I was surprised.

Going back to the splash widget thingy on this page
http://www.countyfairgrounds.net/colorado/colorado.php
  I cannot see the title of the splash image  gallery in the white stripe across the image in the left column (its 3/4 of the way down in the white bar) nor can I find any way to to fix this problem.

AND that jbcore folder you told me to make  in my folder files.... I can do that... question 1) whenever juicebox updates I will only have to update this file to keep my current galleries on countyfairgrounds.net working?  That would be nice. -
2) I do not understand how to do this - more explanation please. I read the link you sent. I also checked the jbcore folder for this gallery - - so am I moving the whole jbcore folder in here ?  like here - http://www.countyfairgrounds.net/jbcore - that is what I am going to do now. ...hope that is right.... 3) I know then that I would have to go to the colorado page and link it to it?

Re: small slider on demo page big responsive when licked

I cannot see the title of the splash image  gallery in the white stripe across the image in the left column (its 3/4 of the way down in the white bar) nor can I find any way to to fix this problem.

This problem is due to some custom CSS code in your 'colorado.css' file which is overriding the gallery's own CSS, specifically lines 683 - 695:

#sidebar h3 {
 font-size:12px;
 color:#990000;
 font-weight:bold;
 margin:5px 70px 2px 70px; 
 background-color:white;
 border-style:inset;
 border-width:1px;
 border-color:#400000;
 padding-top:1px;
 padding-bottom:1px;
 padding-left:20px;
}

Juicebox uses an <h3> tag for the Splash page and the Juicebox gallery is nested within the #sidebar container so the gallery is inheriting the rules above. Try applying your custom CSS rules to only those elements on your web page which require them by using further CSS selectors (ids or classes).

question 1) whenever juicebox updates I will only have to update this file to keep my current galleries on countyfairgrounds.net working?  That would be nice. -

Yes. If all your galleries share a single 'jbcore' folder, then you would just need to update that single 'jbcore' folder to upgrade all your galleries when a new version of Juicebox is released.

2) I do not understand how to do this - more explanation please.

All you need to do is upload a single instance of the 'jbcore' folder and point each gallery's embedding code towards it.
If you choose to upload your 'jbcore' folder to this location:  http://www.countyfairgrounds.net/jbcore
... then you can start each gallery's embedding code with the line:

<script src="/jbcore/juicebox.js"></script>

like here - http://www.countyfairgrounds.net/jbcore - that is what I am going to do now. ...hope that is right....

That is absolutely fine. It does not matter where the 'jbcore' folder is located on your web server as long as the path in the embedding code points towards it correctly.

Your Colorado gallery currently uses the 'jbcore' folder in the 'colorado' directory but you could change the following (on the 'colorado.php' page):

<script src="jbcore/juicebox.js"></script>

... to:

<script src="/jbcore/juicebox.js"></script>

... for the Colorado gallery to use the shared 'jbcore' folder in your root directory instead (and then you could safely delete the 'jbcore' folder from the 'colorado' directory).

Re: small slider on demo page big responsive when licked

1) I don't suppose I could use that folder on countyfairgrounds.net - the jbcore folder and say put the code (nt the jbcore stuff) - but the rest of it on another website and link to the jbcore folder on countyfairgrounds ?

2) that header issue.... I don't know if it is going to be an issue in bootstrap or not - we are converting to bootstrap.
anyway for now.... look you gallery apparently uses h1 - and I am NOT using an h1 in my sidebar .. I need a little more specific help here. cause I tired your suggestion and did not really get it - quite frankly.... some of this coding stuff has gotten way beyond hard ya know. I would really like tobe able to see the words colorado scenery on that splash page.  I am using h2 and h3 and h4 and h5 tags in that side column but NOT h1 -so I don't get what the issue is.


3) also now seriously - all my galleries currently will be galleries from colorado - we would like to add another gallery to this gallery - say a summer photo gallery - I have seen something on your site that lets you do that right? within the same gallery - so I could have one colorado winter scenes and one colorado summer scents, one colorado spring scenes AND ONE jbcore file???

Re: small slider on demo page big responsive when licked

(1) No. All gallery files must be on the same domain (or subdomain) as the document containing the gallery's JavaScript embedding code due to the same-origin policy. The only way around this would be to implement a Cross-Origin Resource Sharing (CORS) solution by adding the following line of code to the .htaccess file in the root directory of the domain which hosts the 'jbcore' folder.

Header add Access-Control-Allow-Origin "*"

It would be much easier to just keep all gallery files on the same domain.

(2) Juicebox uses a <h3> tag for the Splash Title and your custom CSS styles all <h3> tags within the #sidebar container (which is where your gallery is), overriding the gallery's own CSS. It is not possible to isolate an element on a web page to prevent it from inheriting global CSS rules and the best solution might be to use more specific CSS selectors so that the rules are applied to only those elements that require them. However, this might be difficult to do in a WordPress environment. Perhaps the easiest solution would be to open the 'jbcore/classic/theme.css' file in a plain text editor and add the following two lines to the .jb-splash-info h3 section (lines 607-615). The line numbers refer to the current version of Juicebox-Pro (v1.4.3.2).

background-color: transparent !important;
border-style: none !important;

(3) You could have a link in a gallery (in an image title or caption, for example) which would link to another gallery's web page but it is not possible to have a gallery within a gallery.
You could switch between different galleries in a single container (an online example can be found here) but this might be difficult to achieve in a WordPress environment.

Re: small slider on demo page big responsive when licked

Thanks for the in depth reply - I will implement the css stuff .... I am interested in doing number 3 on my countyfairgrounds website gallery.... with the gallery currently in place - sorry if I did not explain it right. http://www.coountyfairgrounds.net/colorado/index.html

so can I take that gallery and add a gallery 2 to it also ? This first gallery is winter scenes - maybe our second would be summer scenes... and yes I have one jbcore folder on countyfairgrounds - but won't making a gallery addition like this createa new jbcore folder?

Re: small slider on demo page big responsive when licked

... but won't making a gallery addition like this createa new jbcore folder?

Yes, but if you change the path to the 'juicebox.js' file to point towards the shared 'jbcore' folder, then you can just delete (or ignore) the 'jbcore' folder in the new gallery.

It sounds like you want to have a link within your gallery to replace the gallery itself with a different one in the same container (your text widget) on your WordPress page. This would not be easy to do at all. It would require a lot of custom coding and knowledge of HTML and JavaScript would be required.

If you were willing to include the links to the different galleries in the text widget alongside the galleries (rather than within the galleries), then you could use code such as the following in your text widget.

In this example, you would upload two complete gallery folders named 'winter' and 'summer' to your root directory.
You would also upload a single 'jbcore' folder to your root directory and you could then delete the 'jbcore' folders in each gallery if you like (as they would not be used).

<script type="text/javascript" src="/jbcore/juicebox.js"></script>
<script type="text/javascript">
    function loadGallery(base) {
        new juicebox({
            baseUrl: base,
            containerId: "juicebox-container",
            galleryHeight: "250",
            galleryWidth: "100%"
        });
    }
    $(document).ready(function() {
        $('.gallery').click(function() {
            var base = '/' + $(this).attr('id') + '/';
            loadGallery(base);
        });
        loadGallery('/winter/');
    });
</script>
<div id="links">
    <input id="winter" class="gallery" type="button" value="Winter" />
    <span>&nbsp;</span>
    <input id="summer" class="gallery" type="button" value="Summer" />
</div>
<div id="juicebox-container"></div>

If you want to add any more galleries, then the 'id' of the new link should be the name of the gallery folder (uploaded to your root directory).

Incidentally, the <input> tags above could be replaced with <span> tags (for a text link instead of a button) if you like, e.g.:

<span id="winter" class="gallery">Winter</span>
<span>&nbsp;</span>
<span id="summer" class="gallery">Summer</span>

Re: small slider on demo page big responsive when licked

Steven wrote:

The path to the 'juicebox.js' file in your gallery's embedding code is incorrect.
Your gallery uses the following code:

<script src="jbcore/juicebox.js"></script>

... so your 'juicebox.js' file should be located here (but it is not): http://www.countyfairgrounds.net/colora … uicebox.js
Please check the location of your gallery files on your web server and the path to the 'juicebox.js' file.

Re: small slider on demo page big responsive when licked

okay I just did something wrong.... My splash page on the colorado page has just disappeared!  I am trying once again to fine tune this jusicebox  I have all the files in http://www.countyfairgrounds.net/colorado  - the colorado ftp folder. I just deleted the jbcore folder from there because I made a main folder outside the colorado folder called jbcore and moved the files there - inside the colorado folder my js
I have this

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

Re: small slider on demo page big responsive when licked

Your gallery's Splash Page displays fine on your /colorado/colorado.php page because the embedding code on that page is OK (loading the 'juicebox.js' file from the 'jbcore' folder in your root directory).

Your gallery does not display when you try to view it on your /colorado/index.html page because the embedding code on this page is looking for the 'juicebox.js' file in a 'jbcore' folder in the 'colorado' folder (and you have removed it).
If you want the gallery to display on your /colorado/index.html page (using the shared 'jbcore' folder in your root directory), then change the following code (on the /colorado/index.html page):

<script src="jbcore/juicebox.js"></script>

... to:

<script src="/jbcore/juicebox.js"></script>

Re: small slider on demo page big responsive when licked

Hey Thank you.... much

Re: small slider on demo page big responsive when licked

You're welcome.