klogan2

Update of my last post. I HAVE found a problem with my fix above, using:

#colorbox, #cboxOverlay {
position:fixed !important;
}

If you have more than 1 link-lightbox (for html sites) on a page, there are problems. It’s a start, though, maybe I will work more on it. If anyone has any ideas, would love to here them ??

Lastly, one feature request: if the lightbox could remain centered, if the background page mistakingly (or intentially) gets scrolled, that would be terrific. I do find that some people (site viewers) get confused with the multiple scroll bars, and/or if they scroll the background and then the lightbox goes up, possibly even off the page.

Updating this, quite some time later, but I did find at least a decent solution to this. Perhaps I wasn’t explaining myself well, but in any event, if you all want to try this, go ahead. It’s simple enough. Add to your theme’s stylesheet:

#colorbox, #cboxOverlay  {
	position:fixed !important;
	}

Even though the background page (under the lightbox) will scroll if the lightbox is scrolled (assuming you’re loading a page in the lightbox tall enough to HAVE scrollbars) to its top or bottom & THEN some, the lightbox remains in position.

YES, that definitely solves the problem. Many thanks estepix

Hi Powerie,
Ya, agree with you RE looking for an alternative, so I am working with the Google API myself. Not hard at all. The google API behaves differently than the plugin, the JS is being inserted in the head, causing no trouble.
So, for me, problem solved.
Cheers,
Kevin Logan

Hi all,
A possible reason for this I have found is that CGMP is loading a js script in the footer, outside of all DIVs (including container DIVs), all on it’s own, NOT contained in any DIV, that perhaps some themes don’t deal well with. It’s a peculiar bit of code, in that it doesn’t even show up in “view page source” of a successfully loaded page.
Here’s the script: <script src="https://maps.gstatic.com/cat_js/intl/en_ALL/mapfiles/api-3/9/8/%7Bmain,panoramio%7D.js"></script>
I THINK it is being loaded by cgmp.framework.min.js. But working with the un-minified version (cgmp.framework.js) I THINK it’s being loaded in line 1060, or there abouts.
I’ve tried a few approaches to test my theory, but so far, no good. I WOULD like to try to figure out how to alter the JS so that this script gets loaded into a DIV, where the syle could be set to overflow:hidden, since I DO think this is some sort of overflow issue. The thing is, I no nothing of JS, so I am really searching in the dark here.
Any ideas, opinions?
Cheers,
Kevin Logan

Last time on this subject, promise, because I figured it out. I needed to change the map_placeholder_and_directions.tpl file, by moving:
<div align="MAP_ALIGN_TOKEN">MARKER_DIRECTIONS_HINT_TOKEN<div class="google-map-placeholder" id="MAP_PLACEHOLDER_ID_TOKEN" style="width: MAP_PLACEHOLDER_WIDTH_TOKEN; height: MAP_PLACEHOLDER_HEIGHT_TOKEN;"><div align="center" style="background:url('IMAGES_DIRECTORY_URI/loading.gif') no-repeat 0 0 transparent !important; height:100px; width:100px; position: relative; top: LOADING_INDICATOR_TOP_POS_TOKENpx !important;"></div></div>
to the very bottom of the TPL
Cheers all,
Kevin Logan

Me again, same issue, but something I HAVE solved. I am using this plugin in a normal desktop fixed width theme, but I also want to use it in a mobile theme (same site). Overall, I am finding dealing withe the touch-screen device concept a challenge.
My goal is to get the map to open on the screen, full screen, or at least full available screen, and essentially NO page scrolling. This part I have worked out. Still tweaking it, but the concept works:
By using JS, getting the screen height variable, passing that to the URL, and then getting the variable using PHP, I can “echo” the value of the variable in the HTML for the height of the map, which must be set in PX (the width can be set in %), i.e. ($height-0)px. I added the -0 so I can tweak the height – or + if need be,, in fact I am, allowing for a div up top that has the page menu in it. here’s the page if you want to try (themidwaybb.com/wp-content/map_mobile3.php), at a few different window heights,, oh the width is set in % of course, so that is responsive as well. The page is a mess right now, becuase I am testing different browses, etc, AND I am having what I think is an overflow problem (see my other post I made today if U like).
Assuming I manage to get the map full screen (Adjusted automatically for all devices), with NO (or little) scrolling, so that as the user scrolls around the map with their finger, they don’t accidentally move the page, IF they want to get directions, this is why I would like the Directions placeholder to open ABOVE the map, pushing the map down. The map form, works fine on a touch-screen device, and can be scrolled Up & down easily & typically. It would be nice that when the directions placeholder is closed, then the map moves back up, again, full screen, with the page more or less locked in position.
So far, I’ve tried moving DIVs, Objects, etc,, but no good. I think tonight, I will look at the JS,, maybe something in there is determining the positions of the placeholders.
So, Any ideas?
All the best,
Kevin

I’m having the same problem as well, with web-bit browers, for sure. It seems to be an overflow issue, I am betting the map itself (I think we only see a small portion of it, more is hidden) and/or the directions.
I have solved the overflow to the right (I THINK), at least with 2 browsers on mobile android platform, by using overflow-x: hidden in the body CSS. However, I still get the Y overflow, which on a touch-screen device is actually a pretty big issue,,, 1 swipe on the map UP (expected behavior, since the map is moved by touch swiping), and the page is off like a rocket to the moon, or at least the ISS.
I have tried putting overflow: hidden is EVERY div, individually (instead of in the body) and it doesn’t work. FYI, if you put overflow: hidden in the body, you won’t get the scrolling in either direction, but you also can’t scroll to see the directions.
Any ideas? Somewhere else to look? JS, CSS? I am what I consider an advanced amateur at this stuff, but I am totally stumped on this one.
Oh, one last thought, that I know isn’t the cause of my experience/problem, but I did figure out a way to get the height of the map to fill the height of the screen, device dependant. My goal is to get the map to open on the page (mobile phones), <i>just</i> about full screen. By using JS, getting the screen height variable, passing that to the URL, and then getting the variable using PHP, I can “echo” the value of the variable in the HTML for the height, i.e. ($height-0)px. I added the -0 so I can tweak the height – or + if need be,, in fact I am, allowing for a div up top that has the page menu in it. here’s the page if you want to try (themidwaybb.com/wp-content/map_mobile3.php), at a few different window heights,, oh the width is set in % of course, so that is responsive as well.
All the best,
Kevin

https://www.ads-software.com/support/topic/add-class-to-link-in-custom-menu

RE my last post, getting Colorbox to work on links in the Custom Menu, I came across another person who wanted the same for Fancybox, SO, thanks to HahahaComedy & his/her code (added in functions.php):

function add_menuclass($ulclass) {
return preg_replace('/<a rel="fancybox"/', '<a rel="fancybox" class="fancybox"', $ulclass, 1);
}
add_filter('wp_nav_menu','add_menuclass');

I did:

function add_menuclass($ulclass) {
return preg_replace('/<a rel="colorbox-link"/', '<a class="colorbox-link cboxElement"', $ulclass, 1);
}
add_filter('wp_nav_menu','add_menuclass');

After editing the functions, in Dashboard/Appearance/Menus, in the screen options tab up top, make sure the Link Relationship XFN is ticked. In Custom Menu involved, in the Link Relationship XFN field I added colorbox-link

This becomes class=”colorbox-link” WITHIN the anchor <a /a>, where it’needed, not with the li tags.

It WORKS fine, just not sure it’s perfectly written/executed. Also, if I add a Title in the title field in Menu Setup, it stops working, so for now, I live without having the title in the ColorBox.
Anyone confirm this is good code? Fix it perfectly? Make it so the title field doesn’t break the link?
Anyway, for now, I’m happy to have it working at all.
Cheers,
Kevin

Original post RE FancyBox:

Plugin still working great, but I still haven’t figured a way of getting the colorbox-link to work with WP Custom menus. Even using the “Class” field in custom menu setup doesn’t do the trick, becuase WP puts the class in the li tag
<li id="menu-item-155" class="colorbox-link menu-item menu-item-type-custom menu-item-object-custom menu-item-155"><a href="https://facebook.com/TheMidwayBB">The Midway On Facebook</a></li>
The above link works fine, but not with colorbox. The link below works perfectly, but note the class is within the <a> tags:
<a class="colorbox-link" href="https://themidwaybb.com/wp-content/cal_double.php">Check<br />Availability</a>
Any ideas? A way to fake out WP? (I actually tried typing in the class in the URL field, but WP strips out most, if not all of it.
Still thinking ??
Cheers,
Kevin

You have to enter the page ID (which you can find when you try to edit the page, etc.
<?php echo do_shortcode('[portfolio_slideshow ID=pageID]');?>

Sorry for the double post

@techotronic,,, the man himself. Well done on the plugin.
The idea of the image or iFrame remaining centered shouldn’t dismiss the idea of scaling,, I think? I get what you mean, that the image/iFrame should fit within the browser window, but it’s also possible to scroll the underlying page. With your lightbox, currently then the image/iFrame scrolls with the underlying page. I THINK that I saw one lightbox (probably FancyBox) where even if the underlying page scrolled, the image/iFrame would remain centered (and scaled) in the browser window.
Get what I mean? In any event, delighted with your lightbox.
Cheers,
Kevin

https://www.addicottweb.com/2009/10/how-to-use-wordpress-conditional-statements/