PVII Support Forums + General Web Design, CSS, and Dreamweaver Discussions

PVII Forums » PVII Product Support

My Follow-Up FGM Question

(29 posts) (2 voices)

Started 9 months ago by wcamp
Latest reply from wcamp

12 Next »

wcamp

offline
Member

I'm concerned with a new challenge that I cannot resolve. Hope this is an easy fix.

On my Home page, which utilizes Flex Grid Magic nicely, I've formatted FGM to appear as four grids per row. The first <div id="p7FGM_1"> has eight thumbnails in it that fit nicely into two rows of four grids.

The second group (titled "Quizzes"), <div id="p7FGM_2">, currently has seven grids; four above three individual grids. I like how that looks; it allows me to add another grid when available. The remaining grid collections also don't fill the column but keep individual grids, flush left, the way I like it.

Here's the Home page that looks the way I want FGM to look.
https://www.warrencampdesign.com

Now, on my new FGM page, which has been formatted to have three thumbnails per row, whenever the number of thumbs is less than three, subsequent grids FILL THE ROW, which looks ugly.
https://www.warrencampdesign.com/peter/peterMasterpieces.php

I've compared the markup and styles of both pages and cannot locate what's different. Sorry.

What must I change to make the FGMs on my new "Peter Masterpieces" page follow the preferred format that appears on my Home page?

Many thanks for helping me resolve this issue.

Warren

Posted 9 months ago
Gerry

offline
PVII Team

In order to prevent the flex box from filling the container you need to set the section to no grow. On your home page you have this style rule added:

.p7FGM div.fgm-section {
-webkit-flex-grow: 0;
flex-grow: 0;
}

Just add that style rule to your new FGM page.

Posted 9 months ago
wcamp

offline
Member

Dear Gerry:

I'm relieved and very pleased to find your simple correction. It instantly provided the preferred column formatting style for my page's thumbnails.

I now have two FGM follow-up questions to ask.

1. the first "p7FGM_1" div has four grids that come close to filling the page's width. I changed the "23,%" value to "22.6,%" to make them fit. (Using 23% caused the last thumb to drop a line; using 22% left too much space to the right.) Is my use of 22.6% appropriate, as shown here?
. . .
<div id="p7FGM_1" class="p7FGM fgm-borders fgm-rounded fgm-shadow fgm-noscript" data-fgm="p7FGM_1,22.6,%,0">
<div class="fgm-section fgm-vertical-center" data-fgm-basis="22.6,%">
<div class="fgm-content fgm-cnt-top fgm-center">"Peter's Denial"</div>
<div class="fgm-img"><img src="images/petersDenial1_sm.jpg"></div>
<div class="fgm-content fgm-cnt-bottom fgm-center">
<p>Click to enlarge.</p>
<br>
<p>Bloch — 1873 painting</p>
</div>
</div>
<div class="fgm-section fgm-vertical-center" data-fgm-basis="22.6,%">
<div class="fgm-content fgm-cnt-top fgm-center">"Transfiguration"</div>
<div class="fgm-img"><img src="images/transfiguration_sm.jpg"></div>
<div class="fgm-content fgm-cnt-bottom fgm-center">
<p>Click to enlarge.</p>
<br>
<p>Raphael — 1518–1520 painting</p>
</div>
</div> . . .
. . .

2. The second and third rows of FGM grids need special attention. Both are related to one another and ought to reside within the same FGM grid; the lower three grids are detailed thumbs of the upper grid, to which I assigned a 100-percent width. I've attempted to make all four thumbs become one FGM grid, but every effort failed miserably.

Is there an FGM markup and style(s) that I can apply to keep all four thumbs — one full width followed by three smaller grids — within one FGM div?

If not, what new rule must I use to create a grid that contains the four thumbs inside one container that has the same background color (#e2dbcf), as well as FGM's matching borders, rounded corners, and shadows?

Much appreciated, Gerry.

Warren

Posted 9 months ago
Gerry

offline
PVII Team

1. Yes, since you now have the grow set to zero the flex sections will not stretch to fill the space. This forces you to assign a flex basis that will make them as wide as possible without breaking to a new line. Of course, the left and right margins and padding in between images is going to affect this calculation so trial and error testing is needed. Looks like you've found the correct width basis to achieve the look you want.

2. You can easily add the 100% width basis to the FGM that contains the three i mages, it will work perfectly fine. The problem, however is the text and headings between the rows, you will not be able to uses these. I would keep it the way way you have it now, in a separate FGM. It makes adding the text and/or headings and it makes management a bit easier. There is no efficiency difference between one FGM or two separate FGMs.

Posted 9 months ago
wcamp

offline
Member

Okay. I thank you very much for sending me your prompt and helpful e-reply.

Perhaps I'll now try adding the "max-width: 100%" declaration, then see where else I can add or rewrite the related text.

If that effort doesn't produce fruit, I'll follow your closing suggestion, Gerry, and keep the two FGMs separate. Maybe I can put both grids even closer to one another so as to make them seem as though they were connected. ( ; - )

Stay tuned, and thanks, again!

Warren

Posted 9 months ago
wcamp

offline
Member

I'm baaaaaack. I attempted to add a "max-width:100%" declaration to the head section and the three-image grid, as follows:

<style>
.p7FGM .fgm-section {
-webkit-flex-grow: 0;
flex-grow: 0;
}
.fullWidth {
max-width: 100%;
}
</style>

<div id="p7FGM_3" class="p7FGM fgm-section fgm-borders fgm-rounded fgm-shadow fgm-noscript fullWidth" data-fgm="p7FGM_3,100,%,0">

So far, the changes have not done the trick; the three smaller grids have not become one full-width grid. Have I misunderstood what you suggested I do? Or have I erroneously entered one or more entries to my markup?

https://www.warrencampdesign.com/peter/peterMasterpieces.php

Wondering Warren

Posted 9 months ago
Gerry

offline
PVII Team

I Think you misunderstood. The max-width: 100% does nothing to change the way the boxes (sections) are rendered. If you want a box to be full width then you need to set the 'Box Width Basis' to 100% for that box in the FGM interface.

-Open the Modify interface for p7FGM_3 and select the first box.

-Click the 'Add Box' button.

-Now click the 'Move up' button to move this new box to the top.

-Set the Box Width Basis to in the Box List section to 100%.

-In the Image section Browse to your large image, the 'theTributeMoney_lg.jpg' image.

-Add any top or Bottom Content

-Click OK to close the interface.

The first box in p7FGM_3 will render full width, it contains the large image we added. The remaining boxes will render at the 31% that you had previously set for them

Posted 9 months ago
wcamp

offline
Member

I believe that I followed your directions correctly, Gerry. I thank you for providing this helpful support.

https://www.warrencampdesign.com/peter/peterMasterpieces.php

To be sure that I haven't misunderstood what you wrote in response to my previous FGM inquiry, I'll assume that I can NOT assign the background color of all the FGM grids to this newly created combined grid with two grid rows, to make all four images appear to be within one container. Yes? No?

- - -

One important question I now need to ask you about FGM combined with PBX: Before I create PBX instances that reveal large image files and related text when the "Click to enlarge." link is clicked, I need to know about the optimal page size for such a production. Before I add any PBX instance images, the page size is now only 34 kb. To what extent will the addition of ±90 large image files (each ranging from 600 kb to 900 kb), which won't load until the PBX instances are activated, slow down the opening time for this page?

Currently, the page speed measures as follows: Grade "B" with a 93% Performance rating (using GTmettrix).

If, after assigning the ±90 large PBX image files to this page, the speed level drops significantly, would you recommend that I create two, three, or four smaller pages with one Landing page from which to select individual pages?

Wondering Warren

Posted 9 months ago
Gerry

offline
PVII Team

1. The 'box' styling in FGM is all deciated to the box, not the outer container. You could add a style rule that will assign the same styling to the outer FGM container to give the grouped appearance.

Add this style rule:

#p7FGM_3 {
border: 1px solid #000;
background-color: #e2dbcf;
border-radius: 6px;
padding: 6px;
box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 60%);
margin-left: 10px;
margin-right: 10px;
}

and see if your like the effect.

2. The Pop Box system contains no image pre-loading or on-demand loading system. With PBX all content, including images, will be part of the initial page load. Wjat you are really looking for is the functionality of an image gallery tool like our magic Box system. MBX will only load the first image and the rest on demand, keeping the initial page load impact low. The only page load impact would be from the number of thumbnails and the first image. The MBX system includes a handy trigger command that allows you to easily assign any thumb images on your page to the MBX.

https://www.projectseven.com/products/galleries/mbx/index.htm

Posted 9 months ago
wcamp

offline
Member

Thanks very much for providing the style rule, Gerry. I'll modify the background color slightly — a bit lighter — to make all four grids within this FGM stand out yet appear part of the collection. I bet it will look great and serve the desired function.

Regarding your introducing me to MBX, I've spent time looking at all the MBX-related pages. Very impressive. My concern lies with the ease or difficulty I'll likely have using FGM, and PBX, and MBX on this already complex page. I'd already created numerous PBX instances with enlarged photo images and related text, hyperlinks, and videos.

Are you suggesting that I use MBX, with or instead of PBX (with which I've worked comfortably for the past six months)? I'm confused now with what I ought to do next for this "Peter's Masterpieces" page. Please guide me on the options going forward.

Thanks.

Warren

Posted 9 months ago
Gerry

offline
PVII Team

I'm suggesting that you use MBX instead of PBX to display the +-90 images. If you use PBX all 90 images will be downloaded at initial page load and cause a huge delay. The PBX system is a 'tooltip' type system and will only display existing page content. The MBX system is an image presentation system and will only load the image(s) on demand, no effect on page load times so it doesn't matter how many images you have.

Posted 9 months ago
wcamp

offline
Member

Thanks for clarifying this for me.

Before I switch from PBX to MBX, I have these concerns that I ask you to address.

Because I've already created ±25 PBX instances on my page, is it feasible to switch from PBX to MBX without difficulty and loss of a significant amount of already invested time? Should my already performed PBX work prevent me from starting afresh with the MBX program, which will be new to me?

Assuming that I switch from PBX to MBX, would you please provide me with detailed steps to take to convert PBX text, photo data, and styles into MBX text, photos, and styles? I hope you will so that I won't need to pester you with a number of forum posts daily.

I await receipt of your recommended advisory, Gerry.

Sincerely,

Warren

Posted 9 months ago
Gerry

offline
PVII Team

I don't see the 25 instances of PBX on the page, in fact I don't see any so there is no switching involved. Being new to Magic Box I would strongly urge to work with a simple test page first, just to get used to the way MBX work and what it has to offer. Once you're comfortable with it, especially how work with the Trigger command, then add to your page.

MBX includes two separate user interfaces, the main interface that contains all of the full size images and/or thumbnails. The separate Trigger interface that allows you to assign an MBX trigger to any test, image or link on your page.

Essentially you would use just one instance of MBX on the page, add all of your full size images to this single instance. If you have all of your full size images in the same folder then use the handy 'Import' utility to import those images. Since you already have the 'thumbnail' (trigger) images on the page be sure to un-select the 'Thumbnails' option at the top of the mBX interface since you do not want the MBX system to create the thumbnail markup.

Once you have the single MBX added to you page you'll use the 'Trigger' command to assign MBX to each thumbnail, (trigger) image. Just click on the image and open the MBX Trigger command. Select the image number that MBX should display and the click OK. Repeat this for each thumbnail (trigger) image.

Now you'll have a fully operational MBX on the page, click on any trigger image and the MBX will open to that full size image.

Now it's time to open the main MBX interface and review the options, toolbar, auto play, animation, styling, etc. and adjust to your liking.

It should be pretty straightforward and you should be able to operation pretty quickly, but again, experiment on a test page first, just to ge tthe hang of it.

Also note that the MBX system is not replacement for PBX, it is an image display system. Continue to use PBX for the test/content popups on your pages.

User Guide for MBX:
https://www.projectseven.com/products/galleries/mbx/guide/index.htm

Example - Tutorial for Triggers
https://www.projectseven.com/products/galleries/mbx/demos/demo-02.htm

Posted 9 months ago
wcamp

offline
Member

Hi, Gerry:

I've done a lot of work on this page without uploading it. Regarding the PBX instances, I've copy/pasted the text and hyperlinks in several of them to my Pages word processor, storing that data for a while until I begin to work with Magic Box User (MBX). There are approximately thirteen PBX instances that I've yet to transfer to Pages, then remove from this photo album. Because there's an extensive amount of organizing and sorting of image grids on this album page, I suspect that I'll be working on its formatting for a couple more weeks.

https://www.warrencampdesign.com/peter/peterMasterpieces.php

I appreciate your breaking down the two basic elements of MBX for me. I'll keep your commentary handy for when I'll create that "simple test page."

I do want to verify your use of the word "test" in ¶2 and ¶8. I suspect that you meant to type "text", yes?

And, thanks for reminding me that MBX isn't a replacement for PBX. I understand [now] that on this album page, PBX is designed for tooltips, text, and video popups while MBX will take care of my image files. All in all, my album will incorporate the harmonious use of FGM, PBX, and MBX.

Thanks for enlightening me, Gerry.

Posted 9 months ago
Gerry

offline
PVII Team

Thanks Warren!

and yep, the 'test' in those two paragraphs should be 'text'.

Posted 9 months ago
wcamp

offline
Member

Hi, Gerry:

My first TEST page for the "Peter Masterpieces" album is complete and ready for Magic Box (MBX), as you recommended to me four months ago, . . .

. . .

Essentially you would use just one instance of MBX on the page, add all of your full-size images to this single instance.
. . .

Following that direction, and using the User guide, I placed my cursor immediately ahead of the first FGM instance that houses the thumbnails: "<div id="p7FGM_1". . .>." From the UI, I selected Import Images and then attempted to choose the folder that houses the full-size image files.

For no apparent reason, when I click Browse, that folder has a grayed-out Open button. What prevents MBX from recognizing and accepting the full-size images folder?

Warren

Posted 5 months ago
Gerry

offline
PVII Team

On a Mac the Open button in the Browse dialog will be grayed out until you actually select an image. Once you have selected the folder and you see the images listed, just select an image, any image, to enable the Open button. Then click the Open button and you'll be returned to the MBX interface. The MBX interface will then show all of the images in that folder.

Posted 5 months ago
wcamp

offline
Member

Your suggested workaround for the Mac platform worked for me, Gerry. Thanks. Consider including that directive in your MBX user guide; it would have saved me a couple of hours of failed efforts and frustration.

Follow-up question: My large photo album will be broken into nine smaller albums. Each album or page already has thumbnails with captions. I don't want to create a new/different slideshow. I want only to utilize MBX's fast-loading and attractive features to open full-size images when thumbs are clicked. Am I to use only the MBX trigger command? If so, how/where do I activate MBX on my first TEST page?

The thumbnail layout appears on this page:https://www.warrencampdesign.com/peter/peter-masterpieces.php

I'll wait for your answer before working further on my first mini-album TEST page. I look forward to getting this process understood from the start so I can develop these albums by benefitting them from Magic Box's attractive attributes. Thanks, Gerry.

Warren

Posted 5 months ago
Gerry

offline
PVII Team

The MBX Import folder selection routine is exactly the same for both Mac and Windows. From the MBX User Guide, 'Import Images' section:

-Browse to the folder where your full-size images are and select any image. Then click OK. All the images in that folder will appear in the Full Size Images column

To use your own thumbnails with MBX:

1. Create an MBX that contains ONLY the full size images that you want in this MBX instance, for example, all of the 'Peter, Alone' full size images.

2. Now assign the MBX trigger to each of your thumbnails by clicking on a thumbnail and opening the MBX Trigger interface. Select the slide number you wish to open. It's best to do this sequentially so it's easier to keep track of the slide numbers. Click OK, and the trigger action will be applied to your thumbnail.

3. Repeat for all of the thumbnails in this 'Peter, Alone' section.

4. Test it.

5. Now create the next MBX, for example, the 'The Calling of Apostles Peter and Andrew' section. Follow the above steps 1-3.

6. Repeat for all of your image sections.

Posted 5 months ago
wcamp

offline
Member

My initial MBX orientation is going well. I thank you, Gerry, for itemizing the sequential steps, which I've followed to the point of creating the first four MBX-triggered instances, shown on this TEST page:
https://www.warrencampdesign.com/peter/peter-masterpieces.pg1.TEST-MBX.php

Before I go forward, I'd like your guidance on how to accomplish the following two tasks.

1. When hovering over each of the first four thumbnails, an MBX enlargement effect is made that removes the thin border that I initially gave each thumb. And while it's attractive to highlight a selected thumb, I'd like to restyle that rule so that the enlarged size doesn't block a thumb's top and bottom captions. Note: The second thumb (the painting by Zoppo) is narrower than the other three and consequently creates a white background on the sides of that enlarged/scaled thumb. What specific rule/rules control the scaling value and/or background color of the enlarged thumbs?

2. I want all of the enlarged image slides to have: (a) a caption at the bottom and top; and (b) a text box on the right (for vertical/portrait images) and a text box beneath horizontal/landscape image slides. There may also be occasions when I want a text box on the right as well as at the bottom of image slides. Assuming that I'll use PBX for those text containers, how do I create instances that have a text box on the right, one at the bottom (in addition to the bottom caption), and one at the right and bottom of an image slide?

Thanks very much, Gerry!

Posted 5 months ago
Gerry

offline
PVII Team

1. To chnage the zoom amount for the thumbnail hover open the p7MBX-01.css style sheet and locate this style rule at line 26:

.mbx-external img:hover {
-webkit-transform: scale(1.15);
transform: scale(1.15);
z-index: 10;
}

Change the 1.15 in both places to 1.05, or if you want even less zoom change it to 1.03.

2. The Magic Box system, in image display mode, supports only a caption and/or description placed above or below the image. In content slide mode it will display whatever you place into the content div... of course this would then affect your page load speed because in content mode all of the images will be part of the initial page load.

Posted 5 months ago
wcamp

offline
Member

Regarding item 1 only, I've modified the hover scale appropriately. I have these follow-up questions.

a. The first four thumbs, which have been MBX enabled, have a different border than what all the others have, which I prefer. How do I style these four MBX-enabled thumbs to match the other thumbs?

b. When the first four hovered thumbs enlarge, there is a white background behind them, which is most evident when you enlarge the second thumb. How would you prevent that background from appearing behind the enlarged thumbs?

Warren

Posted 5 months ago
Gerry

offline
PVII Team

a. With the first four thumbs turned into MBX triggers, the images are now inside <a> tags. What you are seeing is the default FGM styling for the <a> tag (white text and white border). To fix, add this style rule to your p7FGM-01.css style sheet:

.fgm-section .fgm-img a.p7mbx-trigger,
.fgm-section .fgm-img a.p7mbx-trigger:hover {
color: #000;
}

This simply changes the text color for the default FGM links from white to black, which then becomes the default border color as well.

2. That would be the <a> tag background color inherited from your 'main-content a' style rule. To fix, add this:

background-color: transparent;

to the above style rule so that it now looks like this:

.fgm-section .fgm-img a.p7mbx-trigger,
.fgm-section .fgm-img a.p7mbx-trigger:hover {
color: #000;
background-color: transparent;
}

Posted 5 months ago
wcamp

offline
Member

Wow! Both of your suggestions make this hovered scaling effect work like a charm! I appreciate your explanations, too. Many thanks, indeed, Gerry.

I want to be sure that I entered that rule in the appropriate place: not in the style sheet that you mentioned but in my customized "p7FGM-01.exceptions.css" sheet.

Further, I placed the rule beneath a similar a-tag rule, as follows.

.fgm-section .fgm-img a,
.fgm-section .fgm-img a:hover {
border: none;
display: block;
}
.fgm-section .fgm-img a.p7mbx-trigger,
.fgm-section .fgm-img a.p7mbx-trigger:hover {
color: #000;
background-color: transparent;
}
. . .

All's well in my opinion. Please lemmeeeeno if I need to modify that entry. Thanks, pal.

https://www.warrencampdesign.com/peter/peter-masterpieces.pg1.TEST-MBX.php

Warren

Posted 5 months ago

My Follow-Up FGM Question

Reply »