Thanks Gunter. Could you tell me then how I would have it open BELOW the container of images? I can’t find any setting that affords us that option anywhere; forgive me if it’s staring right at me. I have hunted the forum for “Ajax Below” and can’t find any mention of that being something we could do.

Hi Elliot,
Thank you, but that isn’t what I’d like to be able to do. Perhaps it would help if I gave a specific example:

If I create a portfolio category called “weddings” with the subcategories, “wedding portraits,” “wedding moments,” “engagements”, I’d like to be able to show ALL the images on one page, with sortability by their subcategories.

Without having to upload every single photo separately and use it as a featured pic.

right now, all I can accomplish is to create a portfolio item with a set of images, define it as “wedding portraits,” add a featured image, etc. And then show a page with the thumbnail for each portfolio category, upon which they can click to see JUST the images from that category. Via ajax or other means. Yes, with ajax the other categories are still at the bottom of the page, but the IMAGES from that category are not showing.

My only workaround is to take each individual image and add it as a single portfolio item. There is no way to pull various sets of of images from a portfolio category onto a combined page.

I ended up solving this problem with a plugin plus a custom script, custom php, and custom css.
The plugin author did the heavy lifting here, so while I have his permission to share the customizations, if you use this workaround please thank him.

The plugin I used was “Page Scroll to id.”
In the plugins settings, under “offset,” add “#header:fixed”.
Also where you see “scroll to location hash,” unclick the Enable button.

Then you will want to do the following three customizations:
In Child Theme functions.php:

<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file. 
* WordPress will use those functions instead of the original functions then.
*/

if(!function_exists('child_theme_frontend_scripts'))
{
	
	if(!is_admin()){
		add_action('wp_enqueue_scripts', 'child_theme_frontend_scripts');
	}
	
	function child_theme_frontend_scripts()
	{
		$child_theme_url = get_stylesheet_directory_uri();
		wp_enqueue_script( 'custom-script',  $child_theme_url.'/js/custom-script.js', array('jquery'), 1, true);
	}
	
}

In Child Theme’s custom.css, add the following: (You may need to alter the colors for your own instance.)

.main_color .sidebar .current-menu-item>a._mPS2id-h{
color: #919191;
font-weight: normal;
}

.main_color .sidebar .current-menu-item>a._mPS2id-h:hover{
color: #8bba34;
}

.main_color .sidebar .current-menu-item>a._mPS2id-h.mPS2id-clicked{
color: #222222;
font-weight: bold;
}

.av-main-nav .current-menu-item > a > .avia-menu-fx{
opacity: 0;
}

.header_color .main_menu ul:first-child > li.current-menu-item > a,
#top .header_color .main_menu .menu .avia_mega_div ul .current-menu-item > a{
color: #919191;
}

.av-main-nav .active-parent-item > a > .avia-menu-fx, .av-main-nav .current-page-parent > a > .avia-menu-fx, .av-main-nav .current_page_parent > a > .avia-menu-fx,
.av-main-nav .active-parent-item.current-menu-item > a > .avia-menu-fx, .av-main-nav .current-page-parent.current-menu-item > a > .avia-menu-fx,
.av-main-nav .current_page_parent.current-menu-item > a > .avia-menu-fx,
.av-main-nav .current_page_item > a > .avia-menu-fx{
opacity: 1;
visibility: visible;
}

.header_color .main_menu ul:first-child > li.current-page-parent > a, .header_color .main_menu ul:first-child > li.current_page_parent > a,
.header_color .main_menu ul:first-child > li.current_page_item > a,
.header_color .main_menu ul:first-child > li.current-menu-item > a:hover{
color: #666;
}

<strong>Create a new file named custom-script.js and put it in a folder named "js" in the Child Theme folder.</strong>

/* opens the associated tab of page scroll to id target elements */
(function ($) {
$(window).load(function(){
/* scroll to tabs when page loads if necessary */
var loc=window.location,tabs=$(“.tab_titles”);
if(loc.hash.indexOf(“tab-id-“)!=-1 && tabs.length){
var activeTab=$(“.active_tab”),activeTabID=activeTab.attr(“data-fake-id”),activeTabMenuItem=$(“a[rel=’m_PageScroll2id’][href*='”+activeTabID+”‘]”),delay=500;
setTimeout(function(){ $.mPageScroll2id(“scrollTo”,activeTabID+”-container”,{clicked:activeTabMenuItem,offset:_offset()}); },delay);
}
/* click event to open target tab */
$(“a[rel=’m_PageScroll2id’]”).on(“click.mPS2idTab”,function(e){
var el=$(this),href=el.attr(“href”),targetID=href.split(“#”)[1],target=$(“#”+targetID),tabClass=”tab_content”,parentTab=target.parents(“.”+tabClass),
targetTab=parentTab.length ? parentTab : target.hasClass(tabClass) ? target : null,
locHash=loc.toString().split(“#”)[0],hrefBase=href.split(“#”)[0];
if(hrefBase===locHash){ //same page links: scroll to and open tab
if(targetTab){
var tabID=targetTab.attr(“id”).replace(“-container”,””),tabLink=$(“div[data-fake-id=’#”+tabID+”‘]”);
el.attr(“data-ps2id-offset”,_offset());
tabLink.trigger(“click”);
}
}else{ //different page links: go to original theme url
el.attr(“href”,href.replace(“-container”,””));
}
});
function _offset(){
var origOffset=$(document).data(“mPS2id”).offset,offsetVal=$(origOffset).length ? $(origOffset).height() : origOffset;
return offsetVal+tabs.outerHeight()+$(“#wpadminbar”).height(); //set to return offsetVal; to remove extra offset
}
});
})(jQuery);
`

To add menu items,
Add urls that identify page, tab id, and add -container at the end. Example: “http://yourwebsite.com/page/#tab-id-2-container”
Add “m_PageScroll2id” to the link Relationship (XFN) for each. If this box doesn’t appear you can turn it on under “screen options.”

I’m hoping the issues with targeting links inside tabbed or boxed areas is something that will be fixed in a future update of the theme, but for now, this works for us. I hope it helps others.

Josue, thanks, but that had no impact. Also it looks like you are merely changing an amount, which would not be a correct amount for all tabbed content even if it did have an impact. If I create a link to a tabbed area with a particular tab open, the page lifts up and shows the BOTTOM of the tabbed area box, not the top of it, that is my problem. If I put an anchor link WITHIN the tabbed content, even though I set it at the top of the content text area, it still takes the viewer to the bottom of it for some reason, trying to show the entire boxed area I guess.

Figured it out:

body { font-size: 15px!important; }

it does work. Sorry!