• Registered: 2011-10-22
  • Posts: 14

Topic: Implement Image Drop Shadow and Image Counter

Hello, all.

I'm a new user of SimpleViewer-Pro v2, and I'd appreciate some help regarding drop shadows and image counting. I've read many posts here, and done quite a bit of forum searching, to no avail, so: 1) I've tried to my homework before posting, and; 2) I'd appreciate your help.

I created http://www.billanddot.com/2011-09%20Houston/ with jAlbum's MatrixSlide skin (which uses HighSlide javascript code) a few months ago. As a test of SVP2, I created http://www.billanddot.com/Houston/ the other day; I'm trying to have a similar style to that first page.

Two points, for now. Could someone point me in the right direction regarding adding "Image M of N" somewhere by the image, preferably below it, as I've done on that MatrixSlide page? Does using the Modern template preclude that somehow?

Second, could someone give me some tips regarding the use of image drop shadows? I've played with a transparency setting, which seemed to show more background around the image, and a few other settings. What I'm really after (if possible) is casting a shadow onto the specified tan background, as I've done with the images on that MatrixSlide page.

Thanks for your time and help,

Bill P.

  • Registered: 2008-07-06
  • Posts: 6,334

Re: Implement Image Drop Shadow and Image Counter

Could someone point me in the right direction regarding adding "Image M of N" somewhere by the image, preferably below it, as I've done on that MatrixSlide page? Does using the Modern template preclude that somehow?

Try removing captionPosition="NONE" from your gallery's XML file and replace it with the following:

captionHeight="20"
captionPosition="BOTTOM"
floatCaption="FALSE"
lockBottomStack="FALSE"
showImageNumber="TRUE"

Second, could someone give me some tips regarding the use of image drop shadows?

If you want your image's drop shadow to blend into the image frame, then, rather than use transparency, you could create a JPEG with the drop shadow's background the same color as the frame as in this sample gallery.
Otherwise, you could disable the frames completely and create a JPEG with the drop shadow's background the same color as the gallery's background as in this sample gallery.

[Galleries removed.]

Steven Speirs
SimpleViewer Support Team

3 Reply by wspollack (edited by wspollack 2012-01-12 23:42:28)

  • Registered: 2011-10-22
  • Posts: 14

Re: Implement Image Drop Shadow and Image Counter

Steven,

Thank you for your reply. I've made some changes to http://www.billanddot.com/Houston/ , based on your help.

Regarding the image counter:

- The SV-Pro config page says "captionFontSize 14 Default caption font size. Can be overridden by HTML formatting." I believe this is the relevant option, if I should desire to make those digits a little larger. By "HTML formatting," do you mean that changing that font size cannot be done in svBuilder-Pro? If it can't be done there, could you give me an example of the HTML code involved?

- Am I correct in that changing "1/56" to, say, "Image 1 of 56" would require HTML work, too?

Regarding the drop shadow:

- I appreciate the examples; I think you meant to enter [Gallery removed.] (i.e., "dropshadow2") as the second example. Anyway, I prefer that first example, the one with the frame, but I do not understand your comment. Are those jpegs in the first example generated outside of svBuilder-Pro, by some other software, first? Or is this work done by the software here? If the shadow is generated by this SimpleViewer software, I still don't understand what settings I have to make in svBuilder-Pro (or, using an editor, to alter in gallery.xml), in order to have a darkish shadow appear in the tan frame area (as is done by MatrixSlide, in that other example). Sorry for being so dense here.

Thank you,

Bill P.

  • Registered: 2008-07-06
  • Posts: 6,334

Re: Implement Image Drop Shadow and Image Counter

I believe this is the relevant option, if I should desire to make those digits a little larger.

In order to increase the font size of the image counter, use the Pro Option imageNumberFontSize.

By "HTML formatting," do you mean that changing that font size cannot be done in svBuilder-Pro?

All Pro Options can be changed via the interface in svBuilder-Pro.
However, you can override the captionFontSize Pro Option by inserting a caption such as:

<font size="40">Caption Text Goes Here</font>

Am I correct in that changing "1/56" to, say, "Image 1 of 56" would require HTML work, too?

The image number cannot be changed from '1/56' to 'Image 1 of 56'. The format is hardwired within the SWF file.
You could, however, set showImageNumber="FALSE" and then insert 'Image 1 of 56' as a caption.

I think you meant to enter [Gallery removed.] (i.e., "dropshadow2") as the second example.

Yes, indeed. Thank you for reporting. I have now edited my original post.

Are those jpegs in the first example generated outside of svBuilder-Pro, by some other software, first? Or is this work done by the software here?

The entire gallery (including the processing of the original images to include a drop-shadow filter) was created in a single pass by jAlbum and the SimpleViewer skin. (Once both jAlbum and the skin have been installed, go to the 'Filters -> Extended Border' tab in the skin settings.)
svBuilder-Pro is not able to create this effect (a drop-shadow on the image merging into a frame).
Settings imageDropShadow="TRUE" in svBuilder-Pro will, however, create a drop-shadow behind the image and frame onto the gallery background (though not the image onto the frame).

Steven Speirs
SimpleViewer Support Team
  • Registered: 2011-10-22
  • Posts: 14

Re: Implement Image Drop Shadow and Image Counter

Steven,

Thank you for your continued help. There's a lot for me to absorb here; I'll do some more experimenting over the next few days.

Thanks again,

Bill

6 Reply by wspollack (edited by wspollack 2012-01-14 23:35:17)

  • Registered: 2011-10-22
  • Posts: 14

Re: Implement Image Drop Shadow and Image Counter

Steven,

I'm getting there! Just a little more of your time, please...

I've changed the svBuilder-Pro site that I referenced earlier (above) to http://www.billanddot.com/Houston-svBuilder/ . I created a SimpleViewer via jAlbum site of the original name, http://www.billanddot.com/Houston/ , which is the site I'll be referring to in the following questions.

1) I would like to have the full array of buttons (the ones in ...Houston-svBuilder/) in the ...Houston/ gallery. All I can get shown are the two buttons - Open Image and Full Screen - that you show in [Gallery removed.] . I have played with the "SimpleViewer -> Viewers -> SimpleViewer -> Pro" options in the skin extensively, but nothing helps. Here is that line from the .jap file:

skin.svProOptionsSimpleViewerCode=showImageNumber\="FALSE"\nshowImageNav\="NEVER"\nshowNavButtons\="TRUE"\nshowAutoPlayButton\="TRUE"\nbuttonBarPosition\="STAGE_TOP"\nbuttonBarHAlign\="CENTER"\nbuttonBarVAlign\="TOP"\nbuttonBarPadding\="8"\n

It's as if all of those Pro options - with the exception of showImageNumber="FALSE" - are being ignored (and I even tried placing that one "successful" option in different spots in that option list).

Is it possible to show the Next and Prior image buttons when using the SimpleViewer skin in jAlbum?

2) To upgrade the jAlbum skin to use the Pro options - since I purchased svBuilderPro the other day - I copied (overwrote) the svcore directory and its subdirectories from the installed svBuilderPro (C:\Program Files\svBuilder-Pro\template\svcore) to C:\Users\[Me]\AppData\Roaming\jAlbum\skins\SimpleViewer\select\simpleviewer\svcore and C:\Users\[Me]\Documents\My Albums\Houston\album\res\simpleviewer\svcore (the album I was experimenting with, using SimpleViewer in jAlbum).

I read the C:\Users\[Me]\AppData\Roaming\JAlbum\skins\SimpleViewer\readme.txt to see what to do, and then searched my hard drive. That readme.txt file states:

To integrate the Pro version of SimpleViewer into the skin, replace the Standard version 'svcore' folder in the skin's folder ('SimpleViewer/select/simpleviewer/svcore/') with the Pro version 'svcore' folder from the SimpleViewer-Pro download package ('simpleviewer_pro_213/web/svcore/').

The source directory name and format aren't exactly the same. This isn't a questions; I thought I'd let you know, is all.

3) Is there any setting that controls the spacing around the thumbnail navigation controls? I ask because I'd like to be able to move "Image 1 of 56" a little closer to the nav buttons above it (but couldn't find any setting to accomplish it).

4) I noticed that using the keyboard's right-arrow works only first clicking on the first image (itself, or the next-picture icon that appears while hovering over the right half of the image). Once that's done, the keyboard arrow keys work fine. That is, it's as if that first image must be given a sort of initial focus, before the right-arrow key becomes active (or the End key). If this is the case, is this a quirk of svBuilder-Pro or Flash, or browsers, or...?

5) Speaking of keys, the enableKeyboardControls documentation (at http://simpleviewer.net/simpleviewer/pr … tions.html ) notes:

Keyboard controls are: Image navigation via cursor keys, Home, End, Page Up, Page Down. 'F' key for fullscreen toggle. Space bar for AutoPlay toggle.

I hadn't realized that the Home and End keys functioned the way they did when I posted a similar request in the new-suggestions thread (see http://www.simpleviewer.net/forum/viewt … 742#p42742 ). Given that that capability already exists, if I can get the full image navigation button bar restored, is it possible to add button-bar icons for the First and Last images?

6) Initially, when setting up this page with SimpleViewer, I had a home-page icon in the upper left corner, using SimpleViewer -> Menu -> Menu 2 -> Custom Image 1 and Custom Image 2. I recently noticed that this icon has disappeared over the course of my experimenting, and now Custom Image 1 is grayed out (but not Custom Image 2). This icon's disappearance was probably the result of whatever option I managed to find that eliminated the unused space (to me) on the left side of the page.

If all of that is correct, is there a way to place a custom-link, custom-icon, back in the upper left-hand corner, i.e., over the thumbnails, the way I have that "Home" text up there, in the old ...Houston-svBuilder/ page?

7) I would have added the full .jap file if I could have included a file here; I didn't want to bloat this post any more, by putting it inline, but I'll be glad to do so if you'd like to see it.

Thanks,

Bill

  • Registered: 2008-07-06
  • Posts: 6,334

Re: Implement Image Drop Shadow and Image Counter

1) In order to use Pro Options within the SimpleViewer skin, you must first upgrade the skin from SimpleViewer-Standard (which it comes bundled with) to SimpleViewer-Pro by following these instructions. It looks like you have done this successfully.
Looking at your gallery's XML file, it looks like you have been entering Pro Options in the form:
showAutoPlayButton="TRUE"
Entries in the SimpleViewer skin Pro Options text area should not use quotes, so use instead:
showAutoPlayButton=TRUE
(The skin adds the quotes automatically.)

2) The Pro 'svcore' folder can be taken directly from the 'web' folder of the SimpleViewer-Pro download package or (as you have done) from the installed svBuilder-Pro folder

3) Other than using a Fixed Layout to absolutely position all elements in your gallery, you could try reducing the captionPadding (from the default value of 10) to reduce the amount of padding inside the Caption Area.

4) This is due to the Adobe Flash Player itself. The user must click somewhere on the Flash stage first in order to give it focus.

5) There are no Button Bar icons for first and last images.
You would have to create and overlay your own buttons on top of the gallery (or elsewhere on your page) using HTML and CSS and use the SimpleViewer-Pro API (specifically the getGalleryInfo() and showImage( index: int )methods to have your new 'buttons' take the user to the first and last images in your gallery.

6) The 'Custom Image' is displayed at the top of the menu stack and if you choose to not display the menu, then the 'Custom Image' option will not be available, hence it will be greyed-out.
You could choose to use the 'Overlay' option (text only) which would insert the necessary code into the finished album and then manually change the text for your image in the output file ('gallery.html').

7) When 'Custom 1' is greyed-out, 'Custom 2' should also be greyed-out. If it is not, then it sounds like a bug. If you have a project file that will exhibit this behavior, I would very much like to see it. I will email you with an email address to send the .jap file. Thank you.

I should also point out that the SimpleViewer skin for jAlbum has its own forum here.
If you have any skin-specific queries, please post them there. Thank you.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2011-10-22
  • Posts: 14

Re: Implement Image Drop Shadow and Image Counter

Thanks very much for your help... including directing me to the proper forum. I'll examine your suggestions over the next few days.

Bill