Topic: Upgrading from simpleviewer

Hey everyone, my apologies if this has been covered, please just forward me along if so.

I'm upgrading my site galleries from simpleviewer to juicebox, but I'm having a few problems replicating my layout. I'd like to iron them out before purchasing the Pro edition.

This is my original simpleviewer page: http://www.bloodforthebaron.com/toys/00 … index.html
This is my WIP upgrade test: http://www.bloodforthebaron.com/toys/00 … index.html

As you can see I am also replacing the .jpg images with transparent .png images.

Please could somone advise how to;

1. Remove the thumbnail bar entirely
2. Remove all the shadow edges and hover shadows to my .png images
3. Set my main index page image to 270x400 pixels
4. Figure out why my fullscreen images aren't working in Firefox

Any help would be much appreciated as I've been going in circles!  Thanks.

Re: Upgrading from simpleviewer

1. Remove the thumbnail bar entirely

This can be achieved only in Juicebox-Pro (not in Juicebox-Lite, the free version) by setting showThumbsOnLoad="FALSE" (to hide the thumbnails when the gallery is initialy displayed) and showThumbsButton="FALSE" (to hide the Thumbnail Button on the Button Bar to prevent users from being able to toggle the thumbnails on and off).

2. Remove all the shadow edges and hover shadows to my .png images

Set imageShadowBlur="0" or imageShadowColor="rgba(0,0,0,0)" to make the shadow fully transparent (Juicebox-Pro only).

3. Set my main index page image to 270x400 pixels

You can set the dimensions for the gallery via the galleryWidth and galleryHeight entries in the embedding code.
Your embedding code currently omits both galleryWidth and galleryHeight so Juicebox will use the default value of '100%' for both (resulting in the gallery filling both the width and height of its parent container).
If you want your gallery to be 270px x 400px, then use embedding code such as:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "270",
        galleryHeight: "400"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

No matter what the dimensions of the gallery are, the main images within the gallery will be scaled according to the value of the imageScaleMode configuration option which can be set to SCALE_DOWN, SCALE, FILL, STRETCH or NONE (Juicebox-Pro only). Short descriptions of each of these values can be found in the imageScaleMode entry in the Main Image Options section of the Config Options support page.

4. Figure out why my fullscreen images aren't working in Firefox

When the Expand Button is clicked, the gallery is expanded on top of the embedding page. However, the web page that your gallery is in has HTML errors and this is likely to be causing problems when the gallery is expanded.
Most importantly, your web page does not contain a Doctype Declaration (at the very top of the HTML document before the opening <html> tag). It is important for every web page to contain a Doctype Declaration to let the browser know what set of standards the code on the web page should conform to. Please see here for details.
It looks like the HTML 5 Doctype Declaration would best suit the code on your web page so start by placing the following code at the very top of your web page (before all other content).

<!DOCTYPE HTML>

Now, with the Doctype Declaration in place, check your web page for HTML errors with the W3C Markup Validation Service and fix any errors reported.
Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers (and it should hopefully solve your fullscreen problem).
The errors on your web page should ideally be fixed but Juicebox-Pro provides an alternative solution to your fullscreen problem. By setting expandInNewPage="TRUE", you can force the gallery to be expanded on a new page of its own (instead of on top of the embedding page) where the code (and errors) on the embedding page cannot interfere with the gallery.

For reference, short descriptions for all the configuration options in bold above can be found on the Config Options support page.

Many of the features required to customize your gallery as you would like it are Juicebox-Pro only.
Unfortunately, we do not offer a trial version of Juicebox-Pro but we do offer a 100% money-back guarantee.
Please see this FAQ for details:
Can I try a trial version of Juicebox-Pro?

I hope this helps to clarify things.
If you have any further queries, please let me know.

3 (edited by bloodforthebaron 2018-01-26 07:32:06)

Re: Upgrading from simpleviewer

Thank you so much, I was wondering if it was a trial version issue. Thanks also for the reassurance of the money-back guarantee.

So points 1 and 2 are on easy fix, thank-you for the size coding for point 3.

Point 4 however, remains a pain.  I added the <!DOCTYPE HTML> as suggested. It fixed the fullscreen problem but in so doing lost my stylesheet coding (the hotlinks all changed from sandy-yellow to blue).

I've replaced the test page to show what I mean.

I tried the markup validation link and it found 48 errors, most of which went right over my head.

One thing I don't want is images opening in their own window, I used simpleviewer to prevent hotlinking and downloading of my images.

I'm going to grab the Pro edition now and will get back to you.

Thanks again :)

4 (edited by bloodforthebaron 2018-01-26 07:31:10)

Re: Upgrading from simpleviewer

OK, that's the Pro edition uploaded.

www.bloodforthebaron.com/toys/002/redsh … index.html

Please could you advise on how to fix my stylesheet colours?

And also how to remove the shadow from the mouse hover?

I also no longer have the mouse wheel scroll option between images that simpleviewer had.

Otherwise this is perfect, thank you.

5 (edited by bloodforthebaron 2018-01-26 07:25:57)

Re: Upgrading from simpleviewer

Ah, separate issue... I've just tried viewing the page on my Android phone.  The 270x400 image is now way off; the figure is missing his head and I have a VIEW GALLERY overlay that provides thumbnails and a grid button when in fullscreen.

Really all I want is for the pics to fit into my main page (27% of the width) and to have the fullscreen and scroll buttons, nothing further.

I tried tinkering with imageScaleMode, but it seems to have no effect.

Post's attachments

android.png 1.13 mb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Upgrading from simpleviewer

I tried the markup validation link and it found 48 errors, most of which went right over my head.

I've taken a look at the validation errors from your web page.
Many are trivial (for example, missing 'alt' attributes from <img> tags) and won't actually cause any problems.
However, with so many 'obsolete' errors under the HTML 5 Doctype, your web page might actually be better suited to the HTML 4.01 Transitional Doctype (unless you plan to tackle the errors and replace your web page's table layout with CSS instead).
Try replacing:

<!DOCTYPE HTML>

... with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

... to see if your web page validates under this Doctyle with fewer errors. (Run your web page's URL through the W3C Markup Validation Service again after changing your web page's Doctype.)

One thing I don't want is images opening in their own window, I used simpleviewer to prevent hotlinking and downloading of my images.

Please see this FAQ:
How do I allow or prevent users from saving gallery images?
As noted in the FAQ, it is not possible to right-click on a Juicebox gallery so visitors to your website will not be able to right-click an image as select 'Save Image As...'. If you set showOpenButton="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) and showDownloadButton="FALSE" ('Customize -> Button Bar'), then the Open Image and Download buttons will  not be displayed on the gallery's Button Bar. Also, you might like to watermark your images (to deter visitors from taking screenshots of your gallery). Please see the short Adding Watermarks support section for details.

one quick question, does the Pro edition still have the Juicebox link?

No. The Juicebox branding (the Juicebox badge/link in the lower-right corner) is present only in Juicebox-Lite galleries.

Please could you advise on how to fix my stylesheet colours?

Your 'stylesheet1.css' file has an invalid CSS 'color' property (assigned to the wrong element).
Remove:

color:eecc00;

... from line 30, in this section:

#toolbar {
    font:normal 17px palitoy;
    color:eecc00;
    margin:0;
    padding:0;
}

... and add the following to your 'stylesheet1.css' file (just below the section above would be fine):

#toolbar a {
    color: #eecc00;
}

This should fix your link color problem.

And also how to remove the shadow from the mouse hover?

What you are describing is the caption area (with a gradient background and displaying the image number).
You can disable to entire caption area by setting captionPosition="NONE" ('Customize -> Caption').
Configuration options which can be used to customize the caption area can be found in the Color and Caption sections.

The 270x400 image is now way off; the figure is missing his head and I have a VIEW GALLERY overlay that provides thumbnails and a grid button when in fullscreen.

What you are describing is the Splash Page.
The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a web page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window) and may may too small to be usable.
The Splash Page is essentially an image link for the gallery which displays an image (by default, the first image in the gallery) and some text.
When the user clicks or taps the Splash Page, the gallery is expanded to fill the browser window (giving the images more space to be displayed).
When the gallery is expanded in Small Screen Mode, the user is presented with a page of thumbnails from which a main image can be selected. When a thumbnail is clicked, the thumbnail page is replaced with the chosen image. (In Small Screen Mode, the thumbnails and main images are displayed on different pages to maximize the area available for the images on small screen devices.) The user can return to the thumbnail page via the Thumbnail Button on the gallery's Button Bar.
More information about the Splash Page can be found in the Screen Modes section of the Gallery Tour.

By default, the Splash Page uses the first image in the gallery and scales the image to fill (rather than fit within) the Splash Page (which uses the gallery dimensions). If the image does not have the same aspect ratio as the gallery/Splash Page, then cropping will occur (as you have discovered).
There is no way to change the scaling behavior for the Splash Page image but you can choose an image to be used for the Splash Page via the splashImageUrl configuration option.
The splashImageUrl can be an absolute path or a relative path (relative to the web page containing the gallery's embedding code).
The splashImageUrl does not need to be a gallery image so you could perhaps prepare an image that represents your gallery and looks better at the gallery/Splash Page dimensions.

You can choose to not use the Splash Page by setting showSplashPage="NEVER" ('Customize -> Splash Page' section). Using this setting, the thumbnail page would initially be displayed instead of the Splash Page on small screen devices.
Alternatively, you could force the gallery to be displayed in Large Screen Mode (which, by default, does not use the Splash Page) on all devices and in all browsers by setting screenMode="LARGE" ('Customize -> General').

For reference, all the Splash Page configuration options can be found here.

I tried tinkering with imageScaleMode, but it seems to have no effect.

Just to clarify, imageScaleMode changes only the scaling of the main image within the gallery's image area.

I hope these notes help.

Re: Upgrading from simpleviewer

Dude, you absolute rock star.

Thank you so much - I'm going to go follow that word-for-word and come running back.

It occurs to me that the HTML for my site is old and has been updated time and again. Pretty much most pages on my site follow this template, so it may just be easier for me to rebuild around Juicebox

If you could recommend some software for that I'd be most grateufl, I've been advised to get a few upgrades such as drop-down navigation menus, adding a Wordpress Blog and Mailpoet Newsletter and possibly a Wiki. I've also got zero SEO so was planning a bit of an overhaul anyway.

I really appreciate your diligence - thanks again,

Jim.

Re: Upgrading from simpleviewer

OK, I'm back!

http://www.bloodforthebaron.com/toys/00 … B%20test/#

The new Doctype generates a whole new validation with 22 Errors and 2 Warnings.

The stylesheet advice was bang-on and I have removed the Download button and shadow from the caption area.  Thank you ever so much.

I tried adding splashImageUrl="images/splash.png" to config, which is a 1/3-size copy of 001.png. Everything still displays the same on my android phone so perhaps I missed a step.

As I say, it may just be easier to rebuild the page around Juicebox.

Thanks again for your help,

Jim.

Re: Upgrading from simpleviewer

Thank you so much...

You're welcome!

... so it may just be easier for me to rebuild around Juicebox

If you want to build a new website around Juicebox galleries, then you might like to take a look an another one of our products, Showkase, which allows you to create a complete HTML 5 portfolio website.

Showkase is a PHP web application which in installed on your web server and whose interface is accessed via a web browser.
Showkase has full support for Juicebox-Pro and the galleries can be created within the application itself via its interface (or created with JuiceboxBuilder-Pro and imported).

You can create Gallery Index pages and have as many galleries listed on each Gallery Index page as you wish.
Each gallery is represented by a thumbnail image with the gallery title displayed below and the gallery is opened when the user clicks on the image.
Demo sites created with Showkase can be found here and a sample Gallery Index page can be found here.

Showkase can also create non-gallery pages (About, Basic and Contact pages) where you can add information about yourself (or any other content you like).
All of this is done automatically within the Showkase interface without the need for any manual coding at all.
You can take a look around the Showkase interface by logging into the Live Demo Admin.

Showkase can be purchased as Showkase-Standard (which comes with Juicebox-Lite) or Showkase-Pro (which comes with Juicebox-Pro).
The only difference between Showkase-Standard and Showkase-Pro is the bundled viewer (Juicebox-Lite vs Juicebox-Pro).

... adding a Wordpress Blog

Alternatively, as you have already mentioned WordPress, you might like to try using WordPress to create your website.
There is a dedicated Juicebox plugin for WordPress, WP-Juicebox, which allows you to create and embed Juicebox galleries in WordPress pages and posts without any manual coding.
WordPress can quite easily be used to create a complete website (it is no longer just the blogging platform it started out as) although it it by no means as Juicebox-centric as Showkase.

The new Doctype generates a whole new validation with 22 Errors and 2 Warnings.

Under the HTML 4.01 Transitional Doctype, there are certainly fewer errors and warnings for your web page than under the HTML 5 Doctype (which makes sense, knowing that your code is quite old). As before, many of the errors are trivial and will not actually cause any problems when your web page is viewed in browsers.
For example, just add an alt="image" attribute to all the <img> tags on your page and a type="text/javascript" attribute to all the <script> tags on your page and that will fix 7 of the errors straight away.

The stylesheet advice was bang-on and I have removed the Download button and shadow from the caption area.  Thank you ever so much.

No problem. I'm glad my suggestions worked.

I tried adding splashImageUrl="images/splash.png" to config, which is a 1/3-size copy of 001.png. Everything still displays the same on my android phone so perhaps I missed a step.

Both your images have exactly the same aspect ratio so they will both be scaled similarly for the Splash Page.
When the image is displayed in the gallery, it is dynamically scaled down to fit within the image area, respecting its aspect ratio and without any cropping (so the top and bottom of the image are flush with the top and bottom of the gallery and there is space to the left and right of the image which cannot be seen as you have a transparent background).
When the image is used for the Splash Page, Juicebox scales the image to ensure that there is no empty space (so the left and right sides of the image are flush with the left and right sides of the gallery and the top and bottom of the image are cropped as it is vertically centered).
You'll need to provide an image which has the same aspect ratio as your gallery (270:400 -> 1:1.48) if you do not want the Splash Page image to be cropped.
You could either reduce your image's height (by cropping the bottom of your image yourself), or increase your image's width (padding the left and right sides with blank space by increasing the canvas area).

I hope my notes above are helpful.

Re: Upgrading from simpleviewer

Hi, first of all I'm really sorry for not responding to your last post - I lost a ton of data and have had to rebuild pretty much everything. It's only today that I've got back to this project.

I've decided to build using HTML, it'll be quicker for me than learning a new system, I will be adding a Wordpress blog to the site though.

I've built a new template test page for experimenting on, which is here: http://www.bloodforthebaron.com/toys/00 … index.html so far it all seems to be behaving in IE, Firefox, Opera and Chrome. Is there any way I can test with Safari, do you know, please?

I do have 2 Juicebox questions, the first being is it possible to change the colour of the thumbSelectedFrame and the other is how to enable pinch and zoom for touchscreens when in fullscreen mode.  I did browse through the support posts and similar queries but can't seem to crack it.

Any help would be much appreciated!

Thanks,

Jim.

Re: Upgrading from simpleviewer

Hi, first of all I'm really sorry for not responding to your last post...

No problem!

Is there any way I can test with Safari, do you know, please?

Try a web search with terms such as "browser compatibility testing tools" or take a look at this Stack Overflow forum thread for some suggestions. The general consensus of opinion seems to suggest that the best solutions would be to either use BrowserStack (not free) or run MacOS X Server in a Virtual Machine environment (such as VirtualBox).
However, I would recommend that you check the code on your web page with the W3C Markup Validation Service and fix any errors reported.
Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers and if your web page looks good and behaves well in all browsers that you have access to, then there is a high likelihood (although not 100%) that it will look and behave similarly in other browsers (such as Safari), too.

... is it possible to change the colour of the thumbSelectedFrame

You can change the thumbnail frame color via thumbFrameColor (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) but there is no distinction between a regular thumbnail frame and a selected thumbnail frame. There are no configuration options to set different colors for selected vs regular thumbnail frames.
You might be able to set a selected thumbnail frame color (independent of the regular frame color) via CSS, though.
Try adding the following (either within <style> ... </style> tags in your web page's <head> section or at the end of your gallery's 'jbcore/classic/theme.css' file) and change the color as required (this example uses fully opaque red):

.jb-thm-thumb-selected .jb-idx-thb-frame {
    border-color: rgba(255,0,0,1) !important;
}

I cannot be sure that this is a completely robust solution (as Juicebox-Pro was not designed with this in mind) but it seems to work OK in my own tests.

... how to enable pinch and zoom for touchscreens when in fullscreen mode

Unfortunately, it can be very difficult to pinch-zoom within a Juicebox gallery as a pinch-zoom gesture can often be misinterpreted as the start of a navigation swipe within the gallery so, for a full-page or expanded gallery, Juicebox locks the viewport of the web page to avoid such issues.
If you'd like to zoom into an image, I would recommend that the image be opened on a page of its own first. You can allow users to open an image on a page of its own either via the gallery's 'Open Image' button (by setting showOpenButton="TRUE" in JuiceboxBuilder-Pro's 'Customize -> Lite' section) or by tapping/clicking the main image (when setting imageClickMode="OPEN_URL" in the 'Customize -> Main Image' section). (Please note that showOpenButton is supported by both Juicebox-Lite and Juicebox-Pro but imageClickMode is a Pro-only option.)
Once the image is displayed on a page of its own, it can be pinch-zoomed with ease (and without adversely affecting the gallery itself).

I hope these notes help.

Re: Upgrading from simpleviewer

Thank you!

thumbFrameColor did the trick!  I did try that myself but think I probably spelled colour with a u LOL

No Pinch & Zoom is a bit of a problem, I really don't want to open images in their own window as the big appeal of Juicebox for me is no hotlinking or downloading, which is conditional for my use of licensed properties.

Is there no work-around?  It would make a huge difference to my comics galleries.

13 (edited by bloodforthebaron 2018-08-07 17:58:53)

Re: Upgrading from simpleviewer

Oh, regarding the Markup Validation, I got 14 errors and 2 warnings

https://validator.w3.org/check?uri=http … 2Fservices

The 2 warnings are for character encoding - I have no clue what that is...

7 of the errors are the 7 category buttons, not sure what to do with those
5 of the errors are in the code I copied for the twitter bar
2 of the errors are in the code used for Juicebox

Is there anything there I should be worried about, please?

Re: Upgrading from simpleviewer

I'm glad to hear that using thumbFrameColor has resolved your problem.
Thank you for letting me know.

Unfortunately, there is no easy solution for pinch-zooming within a gallery. (If there was, I would gladly have shared the solution with you.)

With regard to the HTML errors on your web page, the two that refer to Juicebox ('required attribute "TYPE" not specified') are because the embedding code is HTML 5 and your web page currently uses the HTML 4.01 Transitional Doctype Declaration. (The 'type' attribute is required for <script> tags in HTML 4.01 Transitional but not in HTML 5.)
To fix those errors, you could either:

(1) Change your web page to use the HTML 5 Doctype Declaration (instead of HTML 4.01 Transitional) by changing the following code at the very top of your web page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

... to:

<!DOCTYPE HTML>

... or:

(2) Add the 'type' attribute to the <script> tags by changing:

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

... to:

<script src="jbcore/juicebox.js" type="text/javascript"></script> 
<script type="text/javascript">

If you choose Option #1 above, then be sure to revalidate your web page with the new Doctype Declaration in place (in case there is code on your web page which is valid under HTML 4.0.1 Transitional but not valid under HTML 5).

To solve the character encoding warnings, just add the following line of code immediately after your web page's opening <head> tag.

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Many of the other errors are due to the use of <ul> (unordered list) tags without any corresponding <li> tags.
As an example, change:

<ul>
    <a href="../../../../info/index.html"><span>INFO</span></a>
</ul>

... to:

<ul>
    <li>
        <a href="../../../../info/index.html"><span>INFO</span></a>
    </li>
</ul>

Your custom data-* attributes (such as 'data-height') are not likely to cause any problems but it should be noted that data-* attributes are new to HTML 5 (please see here for details) and, therefore, are not listed as errors under the HTML 5 Doctype Declaration.

Adding 'alt' attributes to <img> tags is trivial but worth doing if only to avoid seeing validation errors.

I hope this helps.

15 (edited by bloodforthebaron 2018-08-07 19:25:23)

Re: Upgrading from simpleviewer

Cool, thanks for that!  Adding those changes narrowed it down to just the five Twitter errors.

https://validator.w3.org/check?uri=http … 2Fservices

I created a duplicate page using <!DOCTYPE HTML> here

http://www.bloodforthebaron.com/toys/00 … ndexb.html

and ran another markup - it found 32 errors, mostly saying my code is obselete and to use CSS instead...  Is there much benefit to using HTML 5 or will I be OK leaving it as is?

https://validator.w3.org/nu/?doc=http%3 … ndexb.html

I know these aren't Juicebox questions any more, so I greatly appreciate it.

re. Pinch and Zoom, can you suggest similar software to Juicebox that I could use for the comics galleries, please?

Re: Upgrading from simpleviewer

There are many difference between HTML 4.01 and HTML 5. Please see here for details.
However, if you do not need any of the new HTML 5 elements and your web page contains valid HTML 4.01 code (under the HTML 4.01 Doctype Declaration), then there should be no problems (although, going forward, I would recommend using HTML 5 where possible, especially if you are creating a new web page from scratch).

Unfortunately, I do not know of any other web gallery software that would allow you to pinch-zoom images.
I'm not saying that no such software exists, just that I do not know of any.
(Also, I'm not just saying this to avoid promoting any competitors: I really do not know of any.)
I guess a web search would be your best course of action.

Re: Upgrading from simpleviewer

OK, thanks for all your help.  I don't really want two different types of software on the site now I think about it.

I created a mock-up comics page using the new layout last night;

http://www.bloodforthebaron.com/comics/ … index.html

It's legible enough on my mobile, I guess.

Do you think pinch and zoom is something that might be added to Juicebox over time?

Re: Upgrading from simpleviewer

I really do not know how feasible it would be to implement trouble-free pinch-zooming alongside the existing swipe gesture that is already used on mobile devices for navigation.
The best I can suggest at the moment is that you post your suggestion in the Feature Requests forum thread where is will be seen (and considered) by the developers. Thank you.

Re: Upgrading from simpleviewer

Yeah, I can see how that might cause a conflict.  OK, I will post a request nonetheless.  Thanks for all your help, man. I will delve into the world of HTML 5 and CSS layouts before I commit to a definite build, so may come back with more dumb questions in a while, if that's OK?

Re: Upgrading from simpleviewer

OK, I will post a request nonetheless.

Thank you for posting your suggestion in the Feature Requests thread.

Thanks for all your help, man.

You're welcome!

... if that's OK?

I'll certainly help you out if I can but if your queries are not directly related to Juicebox, then I might be limited in the support that I'm able to give you. I hope you understand.

I find the MDN web docs a very useful reference  to web technologies (e.g. HTML, CSS and JavaScript). Take a look around the site and your find guides, tutorials and examples which should hopefully help you out.
You might also like to take a look at the W3Schools site. It's not quite as comprehensive as the MDN site but it's sometimes easier to find a quick example there.

Re: Upgrading from simpleviewer

That's fantastic, thank you, I will.