Sorry for the long message. Hope it's ok to cross-post like this, and it helps someone else who might be having the same issues.

No problem. Thank you for sharing your experience.

In addition to all the posts above, the following information should help clarify this problem.

There is currently a known bug whereby elements which have explicitly been assigned a CSS position are not covered by the fullscreen gallery (they should be). The developers are aware of this bug and it should hopefully be fixed in a future version of Juicebox.

In the meantime, a workaround is, indeed, to set expandInNewPage="TRUE" in (in JuiceboxBuilder-Pro's 'Customize -> General' section) so that when the gallery is expanded, it will be displayed on a new page of its own rather than on top of the embedding page.

(This bug was not known about at the time of the original post, there were no gallery URLs given that I could check and your own post was the first in this thread to mention elements with a CSS position.)

I hope this helps.

Luckily it disappears when you move to the next picture but I still think it  looks broken and random when it moves to the middle of the main image.

This should not happen and is, indeed, a bug. As I mentioned above, I have logged a bug report with the developers and it should hopefully be fixed in the next version.

I believe it would look much better if the Title would disappear as soon as as the Hide Thumbnails button is pressed

This is what should happen (and what does happen when using my code above).

I'm not sure how the temporary solution (proposed by Steven) would help.

I understand that this would just simply hide the Gallery Title when thumbs are visible - not really what I want.

This is not what happens. The Gallery Title is displayed when the thumbnails are visible (and hidden when the thumbnails are hidden).
The Juicebox-Pro API event onShowThumbs is fired each and every time the thumbnails are toggled (on or off) so the code within the onShowThumbs function is run each time the user clicks the Thumbs Button on the Button Bar.
When the thumbnails are showing, the Gallery Title is shown (using CSS via the jQuery function show()) and when the thumbnails are not showing, the Gallery Title is hidden (using CSS via the jQuery function hide()).
Juicebox comes with its own version of jQuery (bundled within the 'juicebox.js' file) so once this has been loaded on a web page, basic jQuery functionality is available. However, if your web page requires jQuery, then I would strongly recommend that you include your own version of the jQuery library (rather than relying on the built-in version that comes with Juicebox). I could have written the function using standard JavaScript as follows (which has exactly the same functionality but is a lot less compact than the one-liner above)

jb.onShowThumbs = function(showing) {
    var elements = document.getElementsByClassName('jb-area-large-mode-title');
    var element = elements[0];
    if (showing) {
        element.style.display = 'block';
    }
    if (!showing) {
        element.style.display = 'none';
    }
};

If you want to incorporate my solution into your own gallery, just give your 'juicebox' object a variable name (change new juicebox({ to var jb = new juicebox({) and add the onShowThumbs function below your own gallery's embedding code (still within the <script></script> tags).

I hope this helps.

3,403

(9 replies, posted in Juicebox-Pro Support)

Thank you for clarifying.
Juicebox does not load any code from any external websites. When you embed a Juicebox gallery in your web site, the gallery is entirely self-contained. The only references to other web sites would be in standard HTML hyperlinks that you may use within your gallery (and the link back to our own website from the Juicebox branding in Juicebox-Lite galleries).

3,404

(8 replies, posted in Juicebox-Pro Support)

Try removing all CSS applied to the 'juicebox-container' div and apply it to the gallery's parent container instead.
You currently have inline CSS applied directly to the 'juicebox-container' div and JavaScript applying CSS rules (max-width, margin-left and margin-right) to the 'juicebox-container' div on retina screens.
Leave your gallery's width at 100%, leave the gallery's container as <div id="juicebox-container"></div> and apply any CSS (either directly or via JavaScript) to the gallery's parent container (your div with id="wrapper") rather than to the 'juicebox-container' div itself.
Hopefully this will help.

Thank you for reporting this problem.
I have logged a bug report with the developers and it should hopefully be fixed in the next version.
In the meantime, a possible workaround would be to use the Juicebox-Pro API (specifically the onShowThumbs(showing) event) to manually hide the Gallery Title using JavaScript and CSS when the thumbnails are visible. Here is an example of how this could be achieved:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
    containerId: 'juicebox-container',
    galleryTitlePosition: 'ABOVE_THUMBS'
});
jb.onShowThumbs = function(showing) {
    showing ? $('.jb-area-large-mode-title').show() : $('.jb-area-large-mode-title').hide();
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

3,406

(8 replies, posted in Juicebox-Pro Support)

Unfortunately, it looks like your gallery may be affected by a known bug in the current version of WP-Juicebox (affecting NextGEN and Picasa Web Album galleries) which will be fixed in the next version.
Please download this zip file [File removed.], extract the 'wp-juicebox.zip' from within and use it to replace the 'wp-juicebox.php' file on your web server (in your 'wp-content/plugins/wp-juicebox/' directory), overwriting the existing version.
Hopefully this will solve your problem.

I have filled out the wizard for this and am waiting for a reply.

Once you have your new download link, you will be able to download the current version of Juicebox-Pro (v1.4.2) and use the Pro files to upgrade WP-Juicebox by following the instructions here.

3,407

(4 replies, posted in Juicebox-Pro Support)

The Juicebox demos are not available to download as a zip file.

If you would like to replicate the layout of one of the demos, you may find that it is available as a Preset in JuiceboxBuilder-Pro (in the 'Load Preset' drop-down menu on the 'Customize' tab). Just load the Preset and all the relevant configuration options will be applied to your gallery in a single action.

If the demo you are looking to replicate is not represented in the 'Load Preset' drop-down menu, you can download the demo gallery's XML file and load it as a Preset using the 'Presets -> Load Preset...' option from the drop-down menu at the top.

3,408

(5 replies, posted in Juicebox-Pro Support)

The two most likely causes of a completely blank screen where the gallery should be on a mobile device (where the gallery displays OK in desktop browsers) are either:
(1) Viewing the web page over a 3G connection rather than wi-fi.
... or:
(2) JavaScript being disabled in the browser.

If a 3G connection is being used, please see this FAQ:
Why can't I view my gallery on a 3G mobile connection?
If you have already implemented this solution (and it sounds like you may have done), please double-check your .htaccess file as the solution should work fine.

3,409

(9 replies, posted in Juicebox-Pro Support)

In the first case captions do not apear...

Thank you for reporting this issue. It seems to be a bug caused by the combination of setting captionPosition="BELOW_THUMBS" in conjunction with showSmallThumbsOnLoad="FALSE".
I have logged a bug report with the developers and it should hopefully be fixed in the next version of Juicebox.

In the meantime, a possible solution for your gallery would be to set captionPosition="BOTTOM". When setting thumbsPosition="BOTTOM" (as your gallery currently does), setting captionPosition="BOTTOM" places the caption in the same place as setting captionPosition="BELOW_THUMBS".

Please let me know if there is anything I can improve regarding my initial post.

Your gallery seems to load swiftly in browsers on my PC and your images look to be of an acceptable file-size and resolution for web gallery use. However, as you are a Juicebox-Pro user, you might like to take advantage of Juicebox-Pro's Multi-Size Image Support where you provide 3 different sizes of images in your gallery and Juicebox decides which size to use depending on which Screen Mode is used (which, in turn, is dependent on the user's device and screen size). Please see here for more information.

Just a last question: does the juicebox gallery load code from outside the space where it is installed?

I'm not quite sure what you mean by this. Juicebox waits until the web page has been fully parsed by the browser and the Document Object Model  is complete before sizing the gallery container appropriately and dynamically replacing the content of the container (which may be empty or may contain SEO content) with the gallery itself.

3,410

(10 replies, posted in Juicebox-Pro Support)

I take it that there is no similar way in the javascript or xml to target our caption overlay on load when we've set showInfoButton="TRUE"?

This would not be as easy to achieve as my Back Button example above. It would technically be possible to track down all the CSS classes of the elements that you initially want to hide and use CSS and JavaScript to hide them but Juicebox would know nothing of this manual modification and would still think that the overlay is visible and when the user first clicks on the Info Button, Juicebox would hide the already hidden overlay (and it would look like the Info Button does not work).
The same thing happens when firing toggleOverlay() within onInitComplete() (from the Juicebox-Pro API).

3,411

(10 replies, posted in Juicebox-Pro Support)

It sounds like you are experiencing a lot of problems with Juicebox-Pro in your Safari browser.
We have not had any other users experience so many problems with v1.4.2 in any one specific browser so it sounds like your particular version of Safari (v5.1.10) may be at the root of many of your issues.

The resulting gallery fails to open in full screen mode, giving the error :"Juicebox Error: Config XML file not found."

This should not happen unless the 'full.html' page is not in the correct location or has been renamed.
Have you tried completely clearing your browser's cache before reloading your gallery to see if this helps?

When I turn off the "Show Info Button" per your suggestion, the caption overlay now appears "left" even though the configuration is set to "center", again in Safari.

This sounds like you may have a conflict with some CSS code on your web page. (Check your CSS files for any generalized CSS code that the gallery might be inheriting.) However, if this was true, then I would expect the issue to be seen in all browsers (not just Safari v5.1.10).

One thing I have noticed is that your web page loads the 'juicebox.js' file twice. The 'juicebox.js' file should be loaded only once per page. Try removing one of your <script src="../tools/jb/jbcore/juicebox.js"></script> entries to see if this makes a difference.

Essentially, I need to have an option to place a logo JUST on the full screen page, not to have the same logo appear on both regular and full screen pages.

You could perhaps set up the Back Button to display your logo (rather than plain text) by using HTML formatting as documented in this FAQ and then use the Juicebox-Pro API to ensure that the Back Button is displayed only when the gallery is expanded.
Here is an example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
    containerId: 'juicebox-container',
    galleryWidth: '800',
    galleryHeight: '600',
    backButtonPosition: 'TOP',
    backButtonText: '<img src="logo.png" height="50" width="100" alt="logo" />',
    backButtonUrl: 'http://www.example.com'
});
jb.onInitComplete = function() {
    $('.jb-go-back img').hide();
};
jb.onExpand = function(expanded) {
    if (expanded) {
        $('.jb-go-back img').show();
    } else {
        $('.jb-go-back img').hide();
    }
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps.

3,412

(9 replies, posted in Juicebox-Pro Support)

It sounds like you may have purchased Juicebox-Pro recently but if not, please ensure that you are using the current version (v1.4.2) to ensure that any bugs which were present in previous versions but which have since been fixed are not contributing to your problems.
If necessary, instructions for upgrading can be found here.

(1) Try viewing your gallery in different browsers (Chrome, Firefox, Internet Explorer, Opera and Safari) to see if your problem is visible in all browsers. Also, please post the URL to your gallery so that I can take a look for myself.

(2) If you want to tweak the position and/or style of your gallery's image titles and captions, then you can use HTML formatting as documented in this FAQ (using inline CSS properties such as margin and padding as necessary).

(3) The speed at which images load will be dependent on a number of factors:

  • The speed of your web server.

  • The speed of your internet connection.

  • The file size of the images in your gallery.

  • The value of the imagePreloading configuration option.

You have little or no control over the first two factors but make sure that your images are not too large (creating a gallery with JuiceboxBuilder-Pro's default settings should produce images of approximately 120KB each which should be suitable for web gallery use in most cases) and try changing imagePreloading (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) from its default value of PAGE to NEXT so that only the first couple of images in the gallery (rather than all the images on the first thumbnail page) are preloaded when the gallery is initially displayed. This might help speed up the initial display of the gallery.

(4) Pinch-zoom is not actually disabled but the start of a pinch-zoom gesture is likely to be interpreted as the start of a gallery-specific gesture (such as a swipe to navigate between images). If you are very precise, you might be able to pinch-zoom within a gallery. However, there is nothing that can be done to override the current behavior.

(5) This will be partially dependent on the device/hardware being used to display the gallery and the browser, too.
All you can do to maximize the smoothness is to minimize the load on the browser by ensuring that your images are not too large (again, a file size of between 100KB and 120KB should be about right for most scenarios). Preloading images (setting imagePreloading to either PAGE or ALL) may also help (but might slow down the initial gallery display).

(6) Thank you for providing your gallery's configuration options. I have been able to replicate the problem in a test gallery of my own and have logged a bug report with the developers. It looks like the problem is caused by setting showSmallThumbsButton="FALSE". Hopefully the bug will be fixed in the next version of Juicebox-Pro but, in the meantime, the only workaround would be to set showSmallThumbsButton="TRUE". (I realise that you would rather not use this setting but it appears to be the only way around the problem until it is fixed.)

3,413

(10 replies, posted in Juicebox-Pro Support)

Thank you for providing the screenshots. I notice that not only is there a problem with the opacity but there are also elements from your web page (logo and menu) which are visible in the expanded gallery which should not be there.

There is currently a known bug whereby elements which have explicitly been assigned a CSS position are not covered by the fullscreen gallery (they should be). This bug should hopefully be fixed in a future version of Juicebox.
It sounds like this might be the cause of your problem as your CSS files do set CSS positions to elements on your web page.
However, your problem also seems to be isolated to your version of Safari (5.1.10) as I do not see the problem in any browser on my PC.

Until the bug is fixed (which should hopefully solve your problem), it might be wise to set expandInNewPage="TRUE" in (in JuiceboxBuilder-Pro's 'Customize -> General' section) so that when the gallery is expanded, it will be displayed on a new page of its own rather than on top of the embedding page.

Setting expandInNewPage="TRUE" will override useFullscreenExpand="TRUE" but it should result in a fully functional gallery and should hopefully be a suitable solution to your problem until the bug is fixed.

3,414

(1 replies, posted in Juicebox-Pro Support)

Please make sure that you are following the embedding instructions here.

Perhaps the troubleshooting FAQs will help.

If you would like me to take a look to see if I can figure out why your gallery does not display, please post the URL to your gallery's web page. Thank you.

3,415

(4 replies, posted in Juicebox-Pro Support)

Thank you for pointing this out. I will notify the developers.
If you like, you can fix this yourself by opening the 'svmanager/plugins/juicebox/jbpropage.php' file in a plain text editor and changing line 573 from:

<td class="label">'.$imageTransitionType->label().'</td><td>'.$imageTransitionType->select($tab, array('SLIDE', 'FADE', 'NONE')).'</td>

... to:

<td class="label">'.$imageTransitionType->label().'</td><td>'.$imageTransitionType->select($tab, array('SLIDE', 'FADE', 'CROSS_FADE', 'NONE')).'</td>

Please note that the line number above refers to the current version of svManager (v1.8.7).

3,416

(10 replies, posted in Juicebox-Pro Support)

a) full screen mode is almost opaque in Safari v5.1.10 Mac.

I tinkered with different colors and opacities but nothing altered the hiding of all images in full screen mode with Safari.

Perhaps I am misunderstanding your problem. I am not sure what you mean by "nothing altered the hiding of all images in full screen mode".
I have expanded your gallery in Chrome, Firefox, Internet Explorer and Safari on my PC and the expanded gallery looks similar in all browsers.
Could you please upload screenshots somewhere (and provide links) of the gallery's fulscreen display in Safari and in other browsers so that I can see what you are seeing? Thank you.
It might also be worthwhile clearing your browser's cache before reloading your gallery's web page to ensure that your browser is fetching and using the most recent versions of your gallery files.

Too bad there's no option to retain the toggle but start with the overlay off. I'd rather viewers see an unobstructed view of the images first.

If you would like to make any suggestions for future versions of Juicebox-Pro, then please post them in the Feature Requests thread. This keeps them all together and ensures that they are not overlooked. Thank you.

3,417

(10 replies, posted in Juicebox-Pro Support)

(a) Use the expandedBackgroundColor configuration option (in JuiceboxBuidler-Pro's 'Customize -> Color' section) to set the background color for expanded mode. The problem you report is likely to be due to different browsers having different default colors for the fullscreen background (black vs white) and setting an expandedBackgroundColor with an opacity of 1 (fully opaque, no transparency) should hopefully solve your problem.

(b) Please see the Adding a Logo support section for suggestions.
In order for the logo to appear in fullscreen mode, Option #2 or #3 should be suitable.

(c) You have set showInfoButton="TRUE". This overrides the default behavior of the overlay. (This is noted in the description of the showInfoButton configuration option in the Button Bar Options section of the Config Options page.)
The overlay will be displayed on load and can be toggled on and off via the Info Button on the Button Bar.

As you are already using PHP, you could use a PHP include as follows.

(1) Change the filename of 'elaimet.xml' to 'elaimet.php' and change its contents to the following:

<?php header('Content-Type: application/xml'); ?>

<juiceboxgallery 

    useFlickr="true"
    flickrShowTitle="false"
    flickrShowDescription="true"
    flickrImageSize="ORIGINAL"
    flickrImageCount="200"
    flickrUserId=""
    flickrSetId="721576XXXXXXXX"
    flickrSort="date-taken-desc"

<?php include 'extra.php'; ?>

/>

(2) Put your common configuration options into a file named 'extra.php' (just as below):

backgroundColor="rgba(248,248,248,1)"
buttonBarBackColor="rgba(0,0,0,.4)"
buttonBarIconHoverColor="rgba(255,0,0,1)"
buttonBarPosition="TOP"
captionBackColor="rgba(248,248,248,.8)"
captionHAlign="LEFT"
captionPosition="BELOW_IMAGE"
displayTime="4"
enableAutoPlay="true"
enableDirectLinks="true"
frameWidth="1"
galleryFontFace="Arial,Helvetica,sans-serif;"
galleryHeight="450"
galleryTitle=""
galleryTitlePosition="NONE"
galleryWidth="500"
imageFrameColor="rgba(0,0,0,.4)"
imageNavPadding="30"
imageNavPosition="IMAGE"
imageShadowBlur="0"
imageShadowColor="rgba(0,0,0,0)"
imageTransitionTime="0.2"
imageTransitionType="CROSS_FADE"
importCaption="IPTC"
importTitle="IPTC"
languageList="Näytä pistenavigointi|Piilota pistenavigointi|Suurenna kokoruutuutilaan|Sulje kokoruututila|Avaa kuva uudessa ikkunassa|Kuvat|Seuraava kuva|Edellinen kuva|Soita musiikki|Pysäytä musiikki|Näytä tiedot|Piilota tiedot|Aloita näytös|Pysäytä näytös|Näytös päällä|Näytös suljettu|Mene takaisin|Osta tämä kuva|Jaa: Facebook|Jaa: Twitter|Jaa: Google+|Jaa: Pinterest|Jaa: Tumblr|/"
maxCaptionHeight="30"
navButtonBackColor="rgba(0,0,0,0.4)"
navButtonIconHoverColor="rgba(255,0,0,1)"
showAutoPlayButton="true"
showImageNav="false"
showImageOverlay="ALWAYS"
showNavButtons="true"
showOpenButton="false"
showPagingText="False"
showSmallThumbsOnLoad="true"
showThumbsButton="false"
showThumbsOnLoad="true"
splashButtonText="Avaa galleria"
textColor="rgba(0,0,0,1)"
textShadowColor="rgba(0,0,0,0)"
thumbFrameColor="rgba(255,0,0,0.8)"
thumbHeight="60"
thumbHoverFrameWidth="1"
thumbSelectedFrameWidth="2"
thumbShadowColor="rgba(0,0,0,0)"
thumbsVAlign="BOTTOM"
thumbWidth="60"
topAreaHeight="0"
topBackColor="rgba(255,255,255,0)"
useFullscreenExpand="true"

(3) Use the following embedding code (changing the file extension of the configUrl):

<!--START JUICEBOX EMBED-->
<script src="galleriat/jbcore/juicebox.js" type="text/javascript"></script>
<script>
    new juicebox({
        configUrl: "galleriat/elaimet.php",
        containerId: "juicebox-container",
        galleryWidth: "500",
        galleryHeight: "450",
        backgroundColor: "rgba(248,248,248,1)"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

3,419

(1 replies, posted in Juicebox-Pro Support)

Your gallery's 'theme.css' file should be located here: http://www.isc-ta.com/test2/jbcore/classic/theme.css
... but going directly to that location in a browser results in an error 404 (file not found).
It looks like the 'theme.css' file has not been uploaded to your web server (or at least not to the correct location).

Please try re-uploading your gallery's entire 'jbcore' folder to ensure that all core Juicebox-Pro files are present and correct.
Also, please check that the permissions on the 'theme.css' file (and on its parent folders) are not too restrictive. Default permissions of 755 for folders and 644 for files should be fine.

3,420

(4 replies, posted in Juicebox-Pro Support)

Thank you for reporting this problem. I have been able to replicate it in a test installation of my own.

It looks like it happens when creating a new Juicebox gallery within svManager as well as when importing a gallery.
Just click on the 'Pro' tab of any Juicebox gallery and the 'SV' logo and 'SimpleViewer Pro Settings' label will be displayed.

However, the problem seems to be just cosmetic within the svManager interface. The actual configuration options available are those for Juicebox-Pro so, although it may look confusing, the actual functionality is fine.

I have notified the developers of this problem and hopefully it will be fixed in the next version of svManager.

3,421

(3 replies, posted in Juicebox-Pro Support)

I have just viewed your gallery in Chrome 36.0, Firefox 31.0 and Internet Explorer 11 and your audio track plays fine in all browsers.
Try clearing your browser's cache to ensure that your browser is fetching and using the most recent versions of your gallery files. Also, check your computer's volume control in case it has been muted or turned down.

In JuiceboxBuilder-Pro's 'Customize -> Color' section, set the 'Opacity' of the 'Text Shadow Color' to '0' (zero).
If editing your gallery's XML file directly, set textShadowColor="rgba(0,0,0,0)". The last rgba parameter is the opacity (the 'alpha' channel).

This solution works equally well with both Juicebox-Lite (the free version and Juicebox-Pro).
Try the following:
(1) Create two galleries and save them in folders named 'gallery1' and 'gallery2'.
(2) Upload the two complete gallery folders (not just the contents) to the root directory of your web space (usually into a directory named 'public_html' or 'htdocs').
(3) Create an HTML web page using the following code, upload it to any location on your web server and open it in a browser.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="minimal-ui" />
        <script type="text/javascript" src="/gallery1/jbcore/juicebox.js"></script>
        <script type="text/javascript">
            function loadGallery(base) {
                new juicebox({
                    baseUrl: base,
                    containerId: "juicebox-container",
                    galleryHeight: "400",
                    galleryWidth: "600"
                });
            }
            $(document).ready(function() {
                $('.gallery').click(function() {
                    var base = '/' + jQuery(this).attr('id') + '/';
                    loadGallery(base);
                });
                loadGallery('/gallery1/');
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="links">
            <input id="gallery1" class="gallery" type="button" value="Gallery 1" />
            <span>&nbsp;</span>
            <input id="gallery2" class="gallery" type="button" value="Gallery 2" />
        </div>
        <div id="juicebox-container"></div>
    </body>
</html>

I've tried to keep the code as basic as possible so that you can see what is going on.
You can change the HTML buttons for text or images if you like, as long as you give each link a class="gallery" attribute and and id with the name of the corresponding gallery folder.
For each additional gallery, all you would do is upload a new gallery folder to the root of your web space and add a line of code such as:

<input id="gallery_folder_name" class="gallery" type="button" value="text_for_button" />

3,424

(4 replies, posted in Juicebox-Pro Support)

Have you checked the .htaccess file(s) on your web server yet?
It looks like there may be rewrite rules in your .htaccess file(s) which might be causing teh problem you describe.

Just for testing purposes, take a backup of your .htaccess files(s) and then temporarily  remove them from your web server to see if this makes a difference.

I would also check with your web host to see if they have made any changes recently which might be contributing you your problem.

Opening an HTML web page that definitely exists on your server and getting an error 404 (file not found) message certainly sounds like it is directly related to your web server or .htaccess file(s) rather than with Juicebox itself.

3,425

(4 replies, posted in Juicebox-Pro Support)

Even the galleries that were built and tested before the issue are affected.

I have viewed your gallery in Chrome and Mobile Safari and see the problem that you are describing.

If your galleries used to display OK but now do not, then something must have changed for this to happen. If you have not made any changes to anything yourself, then the most likely explanation is that your web host may have changed something on your web server. Please check with your web host to see if they have made any changes recently which might be contributing to your problem.

It looks like your web server may be set up to deliver a mobile version of your web site but that the mobile version fails.
Try renaming your gallery's web page (http://www.themagichour.com/roadtrip1/index.html) from 'index.html' to something different, like 'gallery.html' and then try going to http://www.themagichour.com/roadtrip1/gallery.html in your iPhone browser to see if this makes a difference.

Also, check the .htaccess file on your web server to see if there are any rewrite rules which might be causing your problem. I suspect that this might be the root of the problem.