Hide some galleries in homepage but accessible via Navigation Bar

[creativewedding]

I only wanted to show all my weddings galleries in my homepage while the rest of the galleries such as Portfolio via the navigation bar.

Based on my search in this forum, these are codes

function delCategory() {
re = /\/(Portfolio)$/;
if (!YD.hasClass(document.body, 'homepage') || YD.hasClass(document.body, 'loggedIn'))
return;
var oList = YD.getElementsByClassName('miniBox', 'div', YD.get('categoriesBox'));
for (i = 0; i < oList.length; i++) {
if (re.test(oList[i].getElementsByTagName('a')[0].href))
oList[i].parentNode.removeChild(oList[i]);
}
}

However, it didn't seem to work. :scratch

[J Allen]

Try This Thread (http://www.dgrin.com/showthread.php?p=1144549)

[creativewedding]

Hi Allen, I have read the thread but which lines do I need to change? I only wanted to display all the weddings galleries in my homepage, while the rest via the clicking on the navigation bar.

//====TagThumbs====
// adds a CSS classname to the minibox for a category or sub-category thumb so you can then style them individually with CSS (including hiding them)
// in category or sub-category view, this adds a class name of the form thumbnail_catname_subcatname_galleryname
// for gallery thumbs, it also adds a class thumbnail_gallery_xxxxxxx (where xxxxxx is the gallery ID)
// If you are displaying your galleries as a flat list (no categories),
// then you only get the thumbnail_gallery_xxxxxxx class name (because category and subcategory are not known)
function TagThumbs()
{
// get current category and subcategory
var info = GetCategoryInfo();

// get list of miniBox divs in the "this" object
var miniBoxList = YD.getElementsByClassName('miniBox', 'div', this);
// for each miniBox, get the category or sub-category name from the albumTitle div
for (var i = 0; i < miniBoxList.length; i++)
{
// get the albumTitle p tag
var titleTags = YD.getElementsByClassName("albumTitle", "p", miniBoxList[i]);
if (titleTags && (titleTags.length > 0))
{
// get the link in the albumTitle
var linkTags = titleTags[0].getElementsByTagName('a');
if (linkTags && (linkTags.length > 0))
{
// grab the name of the category/subcategory from the thumb
var thumbName = linkTags[0].innerHTML;
thumbName = thumbName.replace(/\s+|\&[a-z]+;|[^_a-zA-Z0-9-]/g, "_"); // replace illegal CSS chars with underscore
var newClassName = "thumbnail_";
if (info.cat)
{
newClassName += info.cat + "_";
}
if (info.subcat)
{
newClassName += info.subcat + "_";
}
newClassName += thumbName;
YD.addClass(miniBoxList[i], newClassName);
}
}

// get the photo div in each miniBox
var photoTags = YD.getElementsByClassName("photo", "div", miniBoxList[i]);
if (!photoTags || (photoTags.length == 0))
{
photoTags = YD.getElementsByClassName("photoLarge", "div", miniBoxList[i]);
}
if (photoTags && (photoTags.length > 0))
{
// get the link in the photo tag
var photoLinkTags = photoTags[0].getElementsByTagName('a');
if (photoLinkTags && (photoLinkTags.length > 0))
{
// grab the URL of the gallery
var link = photoLinkTags[0].href;
// href should be "/gallery/5608799_ZJ27n"
var matches = link.match(/\/gallery\/(\d+)_/);
if (matches && (matches.length > 1))
{
YD.addClass(miniBoxList[i], "thumbnail_gallery_" + matches[1]);
}

}

}
}
}
YE.onContentReady('categoriesBox', TagThumbs);
YE.onContentReady('subcategoriesBox', TagThumbs);
YE.onContentReady('galleriesBox', TagThumbs);
//====End of TagThumbs====

//====GetCategoryInfo====
// Retrieves category and subcategory names from the body tag classes
// returns an object
function GetCategoryInfo()
{
var info = new Object;
info.cat = "";
info.subcat = "";

if (YD.hasClass(document.body, "category"))
{
var re = /category_(\S+)/i;
var matches = re.exec(document.body.className);
if (matches && (matches.length > 1))
{
info.cat = matches[1];
}
if (YD.hasClass(document.body, "subcategory"))
{
re = /subcategory_(\S+)/i;
matches = re.exec(document.body.className);
if (matches && (matches.length > 1))
{
info.subcat = matches[1];
}
}
}
return(info);
}

[creativewedding]

I have also inserted this line under CSS.

.thumbnail_Portfolio {display:none;}

[jfriend]

I have also inserted this line under CSS.

.thumbnail_Portfolio {display:none;} With the method you are currently using, you will need a line of CSS for each thumb you want to hide and you will need to make it so the thumbs only hide on the homepage such as:

.homepage .thumbnail_Red-billed_Gull {display:none;}
.homepage .thumbnail_Black-backed_gull {display:none;}
.homepage .thumbnail_Kea {display:none;}
.homepage .thumbnail_Lesser_Whistling_Duck {display:none;}

and continuing on with a line for each thumb you want to hide making sure to get the capitalization and underscores right for each one.

It might be easier to use this code to remove all thumbs at once in the Portfolio category just from the homepage:


YE.onContentReady("galleriesBox", RemovePortfolioThumbs);

function RemovePortfolioThumbs() {
re = /\/Portfolio\//i;
if !YD.hasClass(document.body, 'homepage') return;
var oList = YD.getElementsByClassName('miniBox', 'div', this);
for (var i = 0; i < oList.length; i++) {
if (re.test(oList[i].getElementsByTagName('a')[0].href))
oList[i].parentNode.removeChild(oList[i]);
}
}

[creativewedding]

It might be easier to use this code to remove all thumbs at once in the Portfolio category just from the homepage:


YE.onContentReady("galleriesBox", RemovePortfolioThumbs);

function RemovePortfolioThumbs() {
re = /\/Portfolio\//i;
if !YD.hasClass(document.body, 'homepage') return;
var oList = YD.getElementsByClassName('miniBox', 'div', this);
for (var i = 0; i < oList.length; i++) {
if (re.test(oList[i].getElementsByTagName('a')[0].href))
oList[i].parentNode.removeChild(oList[i]);
}
}

Hi jfriend, thanks for the input.

I have inserted the codes under Bottom JavaScript but those portfolio galleries are still there. :scratch

[jfriend]

Hi jfriend, thanks for the input.

I have inserted the codes under Bottom JavaScript but those portfolio galleries are still there. :scratch Sorry, as I can't easily try this out on my own site, there was a typo that was keeping it from working. Try this:

YE.onContentReady("galleriesBox", RemovePortfolioThumbs);

function RemovePortfolioThumbs() {
re = /\/Portfolio\//i;
if (!YD.hasClass(document.body, 'homepage')) return;
var oList = YD.getElementsByClassName('miniBox', 'div', this);
for (var i = 0; i < oList.length; i++) {
if (re.test(oList[i].getElementsByTagName('a')[0].href))
oList[i].parentNode.removeChild(oList[i]);
}
}

[creativewedding]

Sorry, as I can't easily try this out on my own site, there was a typo that was keeping it from working. Try this:

YE.onContentReady("galleriesBox", RemovePortfolioThumbs);

function RemovePortfolioThumbs() {
re = /\/Portfolio\//i;
if (!YD.hasClass(document.body, 'homepage')) return;
var oList = YD.getElementsByClassName('miniBox', 'div', this);
for (var i = 0; i < oList.length; i++) {
if (re.test(oList[i].getElementsByTagName('a')[0].href))
oList[i].parentNode.removeChild(oList[i]);
}
}

Hi jfriend, yes, it did hide the portfolio galleries from the homepage but when I clicked on the tab "Portfolio" under the navigation bar, it returned nothing.

[jfriend]

Hi jfriend, yes, it did hide the portfolio galleries from the homepage but when I clicked on the tab "Portfolio" under the navigation bar, it returned nothing. You have an error in the link in your navbar for the Portfolio button. Change that link from:

http:/</li>/kelvinloh.smugmug.com/Portfolio

to this:

http:/kelvinloh.smugmug.com/Portfolio

[creativewedding]

You have an error in the link in your navbar for the Portfolio button. Change that link from:

http:/</li>/kelvinloh.smugmug.com/Portfolio

to this:

http:/kelvinloh.smugmug.com/Portfolio

Hi jfriend, thanks for pointing it out. I must be seeing stars after looking at so many codes.

By the way, if I want to hide multiple categories besides Portfolio, how do I add the extra codes to the exisiting one? Or I just to copy and paste the existing one but replaced the word "Portfolio" with the category that I wanted to hide.

[jfriend]

Hi jfriend, thanks for pointing it out. I must be seeing stars after looking at so many codes.

By the way, if I want to hide multiple categories besides Portfolio, how do I add the extra codes to the exisiting one? Or I just to copy and paste the existing one but replaced the word "Portfolio" with the category that I wanted to hide.

First off, if you just want to hide individual galleries from the homepage like your Guestbook or Rates, then it's far easier to just mark those galleries as "unlisted" in the Gallery Options page. That will remove them from the homepage, but allow you to still link to them directly from your navbar. If you don't need the galleries to also show in a category, then this is the desired approach.

If you don't think that will work for you, then let me know which other galleries you are trying to hide so I can show you how to include them in the same code. You cannot just copy/paste mutliple versions of the code.

[creativewedding]

Hi John!

I do wish to hide all the galleries except the Weddings galleries from the homepage. How am I going to do it since the above codes were meant for one category?

[creativewedding]

Anyone can help? :scratch

[Allen]

Hi John!

I do wish to hide all the galleries except the Weddings galleries from the homepage. How am I going to do it since the above codes were meant for one category?
See #14 here.
http://www.dgrin.com/showthread.php?t=135068
You would have to hide each gallery with CSS though.

[creativewedding]

See #14 here.
http://www.dgrin.com/showthread.php?t=135068
You would have to hide each gallery with CSS though.

Hi Allen,

I have copied and pasted the javascript codes.

For CSS, I have also included this :

.galleries.thumbnail_Travel {display:none;}

But the Travel galleries still show up in the homepage.

[Allen]

Hi Allen,

I have copied and pasted the javascript codes.

For CSS, I have also included this :

.galleries.thumbnail_Travel {display:none;}

But the Travel galleries still show up in the homepage.
I would to ask that question in that thread.