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

PVII Forums » PVII Product Support

Can PBX be streamlined a bit?

(14 posts) (2 voices)

Started 6 months ago by wcamp
Latest reply from wcamp

wcamp

offline
Member

I've created a web page of a large photo album. Each enlarged photo has a caption that includes one to three footnote references that I created using Pop Box Magic. All work very well.

My concern deals with page size. There are approximately 75 PBX instances on page 1 of my multi-page photo album. The completed page totals 200 kb. I want to reduce that size to make the page load faster.

Of the page's 75 PBX instances, there are 10 that are duplicate footnote references. Can the JavaScript be modified so that I could create one PBX instance that could be activated by 10 different triggers found in a variety of the page's photo captions.

Unfortunately, after attempting to insert one instance that has ten different triggers, each PBX instance opened as expected, however, none of them closed when the X icon was clicked. So I've replaced the ten instances, giving each its own trigger number, thereby increasing the page size.

. . . If the JS could be changed to enable multiple triggers to activate one single PBX instance, which could be closed as expected when clicking the X icon, I could shave the page size considerably, as shown in this comparison.

Here's my TEST page with 75 or so PBX instances. It's 200 kb in size. . .
https://www.warrencampdesign.com/peter/peter-masterpieces.pg1-TEST.php

Here's the same page with 10 of the same PBX instances removed. The page size dropped to 176 kb. . .
https://www.warrencampdesign.com/peter/peter-masterpieces.pg1-TEST-empty.php

And, because there are a number of other repeating PBX footnotes on this page, the page size could easily become 150 kb if I could change the JS so it enables multiple triggers for a single PBX instance.

Can the JS be easily modified to accomplish this streamlining task, Gerry? I hope it can because my completed photo album will have at least a dozen pages, each of which will likely have the current 200kb size, which I want to decrease without reducing the number of photos on each page.

I thank you, in advance, for considering this unique request.

Warren

Posted 6 months ago
Gerry

offline
PVII Team

You can re-use an existing PBX as many times as you want by using the include PBX Control Behaviors.

Instead of using a PBX trigger, you use a simple text lik and apply the PBXControl Behavior to open the existing Pop Box, like this:

<a href="#" onclick="P7_PBXctrl('p7PBX_15','open')">Open PopBox 80</a>

The above link will open the Pop Box that has an id of p7PBX_15

Posted 6 months ago
wcamp

offline
Member

That's fabulous news, Gerry! I'll work this week on making those code revisions that will slim down the size of my page(s).

Many thanks for your product creativity and helpful technical support.

Warren

Posted 6 months ago
wcamp

offline
Member

Gerry:

I gave the PBX Control Behaviors a try but it didn't work on the first two instances. Sorry to have to ask you to see what my error is. Would you please look at both instances and advise me of my error? Thank you.

On this page . . . https://www.warrencampdesign.com/peter/peter-masterpieces.pg1-TEST.php . . .
I applied control behaviors to the text link of "Mark 14:66-72" that is in the first paragraph of these two enlarged image captions:
1. Guido Reni: Top row of thumbnails, fourth thumb
2. Guido Reni: Fifth row of thumbnails, first thumb

Many thanks, Gerry!

Warren

Posted 6 months ago
Gerry

offline
PVII Team

Several Issues:

1. We need to add a return false to the link to prevent the browser from processing the anchor link, a link with return false added will look like this:

<a href="#" onclick="P7_PBXctrl('p7PBX_15','open');return false;">Open PopBox 80</a>

2. The PBX Control behavior can only launch a PBX that is already created on the page. The PBX Control Behavior on the "Mark 14:66-72" link is attempting to launch PBX_3. There is no actual PBX_3 defined on the page, you may have removed this. Recreate the actual PBX for PBX_3.

3. The PBXs on the page are all set with the 'Page Click to Close' option enabled. When launching to a PBX from a Control Behavior this option needs to be turned off, otherwise the PBX will be closed as soon as it opens and never show.

If you want, you can change this option easily directly in Code View. A typical PBX will have a data attribute that looks like this:

data-pbx="p7PBX_38,5,600,0,3,400,0,150,0,0,0,0,1"

Change the last number 1 to a zero so it now looks like this:

data-pbx="p7PBX_38,5,600,0,3,400,0,150,0,0,0,0,0"

Now the 'Page Click to Close' option is turned off for that PBX.

Posted 6 months ago
wcamp

offline
Member

I thank you very much, Gerry, for promptly responding, albeit on a Sunday!

Unfortunately, I'm missing something to make this work. Here's what I'd entered for the first paragraph of the top-row Reni enlargement caption. . .

Guido Reni (1575–1642) presents Saint Peter, chief of the apostles, in this bust-length closeup. Gazing upwards, with his hand on his bare chest, we see and feel Peter’s repentance, following his denial(s) that he knew Christ (<a href="#" onclick="P7_PBXctrl('p7PBX_3','open');return false;">Mark 14:66–72</a>).

And here's the PBX for PBX_3, found on line 928, that I hadn't removed. . .

<div id="p7PBXp_3" class="pbx-panel">
<div id="p7PBXw_3" class="pbx-content pbx-borders pbx-rounded pbx-glass pbx-shadow pbx-peterTooltip">
<div class="pbx-close pbx-black-close"><a id="p7PBXcl_3" href="#">Close</a></div>
Peter Disowns Jesus 
 
66While Peter was below in the courtyard, one of the servant girls of the high priest came by. 67When she saw Peter warming himself, she looked closely at him. 
 
“You also were with that Nazarene, Jesus,” she said. 
 
68But he denied it. “I don’t know or understand what you’re talking about,” he said, and went out into the entryway. 
 
69When the servant girl saw him there, she said again to those standing around, “This fellow is one of them.” 70Again he denied it. 
 
After a little while, those standing near said to Peter, “Surely you are one of them, for you are a Galilean.” 
 
71He began to call down curses, and he swore to them, “I don’t know this man you’re talking about.” 
 
72Immediately the rooster crowed the second time. Then Peter remembered the word Jesus had spoken to him: “Before the rooster crows twice you will disown me three times.” And he broke down and wept. 
 
— Mark 14:66–72 NIV
</div>
</div>

I don't know where I'm to enter this essential element that you suggested: data-pbx="p7PBX_3,5,600,0,3,400,0,150,0,0,0,0,0" I thought I was replace that PBX element with the link you'd suggested above. Please advise me of where to enter that element.

Thank you very much.

Warren

Posted 6 months ago
Gerry

offline
PVII Team

The original trigger for the PBX needs to be there, it cannot be replaced. Without the single original PBX trigger the Control Behavior will not work. Once you have a PBX trigger on the page you can then add as many Control Behaviors to the page as you like.

In other words, restore the original trigger for PBX_3. Now this PBX can be re-used by as many Control Behaviors a s you like.

Posted 6 months ago
wcamp

offline
Member

I'm afraid that I still don't understand the apparently simple process, Gerry. Please clarify this for me.

I've now replaced the PBX triggers for both Reni enlargement captions. I've also changed, as you suggested, the data-pbx attribute by exchanging the last digit "1" with "0".

What I still don't know is how and where I'm to insert the PBX control behavior that you referenced above, shown here:
. . .
Instead of using a PBX trigger, you use a simple text lik and apply the PBX Control Behavior to open the existing Pop Box, like this:
<a href="#" onclick="P7_PBXctrl('p7PBX_15','open')">Open PopBox 80</a>
. . .

Would you please give me an appropriate snippet, as well as line numbers where I'm to insert both PBX control behaviors?

Please also describe what exact PBX entries I'm to subsequently delete to reduce the size of the page.

Thanks.

Posted 6 months ago
Gerry

offline
PVII Team

On your test page, the Reni image opens the MBX correctly.

In the MBX you have a normal PBX link ( Mark 14:66–72 ) that opens PBX_3 correctly.

Now, if you want to have any other links that will also open this PBX_3 you can use the Control Behavior:

Add this anywhere else on your page and it will open this same PBX_3:

<a href="#" onclick="P7_PBXctrl('p7PBX_3','open');return false;">Mark 14:66–72</a>

Posted 6 months ago
wcamp

offline
Member

I've almost got it working as it should, Gerry. The two PBX3 instances in the Reni enlargement captions open as expected. And after deleting the duplicate "id="p7PBXp_3" definition, both Reni PBXs open and the page size is smaller.

For no apparent reason, when I click the "close X" icon of each pop box, only the second Reni pop box closes; the first Reni pop box doesn't close when I click the "X". I've cleared the cache files from Safari but that didn't do the trick.

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

FYI: The first Reni is at the end of row 1; the second Reni starts row five.

Please advise what I need to correct.

Thanks, Gerry.

Warren

Posted 6 months ago
Gerry

offline
PVII Team

The first Reni box is setup correctly, as a PBX Trigger.

The second Reni box is a duplicate of the first, a duplicate PBX trigger, which is causing the close issue. This second Reni box should be the one that contains the PBX Control behavior, not the trigger.

To fix:

The second Reni box contains this as the link:

<a href="#" class="pbx-trigger pbx-trig-dark" data-pbx="p7PBX_3,5,600,0,3,400,0,150,0,0,0,0,0">Mark 14:66–72</a>

Replace it with this:

<a href="#" onclick="P7_PBXctrl('p7PBX_3','open');return false;">Mark 14:66–72</a>

Save the page.

Both should now work properly.

Posted 6 months ago
wcamp

offline
Member

Thanks very much, Gerry. I now know the process. It works as it should. Hoooooooray!

May I ask if there's a way to reproduce the PBX trigger styling for the second [and successive] duplicate PBX on this page? I see that the styling of both Reni triggers now differs.

Wondering Warren

Posted 6 months ago
Gerry

offline
PVII Team

You should be able to assign the same stle class to the second and succesice triggers.

The second trigger looks like this:

<a href="#" onclick="P7_PBXctrl('p7PBX_3','open');return false;">Mark 14:66–72</a>

Replace it with this:

<a href="#" class="pbx-trigger pbx-trig-dark" onclick="P7_PBXctrl('p7PBX_3','open');return false;">Mark 14:66–72</a>

The second trigger should now look just like the first.

Posted 6 months ago
wcamp

offline
Member

Yes, indeed! Both PBX triggers for Reni now have the specified style, and both close when the "close X" icon is clicked.

You've made me a "Happy Camper" for which I'm thankful, Gerry.

Warren

Posted 6 months ago

PVII Forums » PVII Product Support

RSS feed for this topic

Reply

You must log in to post.