Current Setup

I'm using Wordpress to produce a toy artist site as well as for each toy I've produced a custom .php template. For instance, for that Cher toy I've produced cher.php. Then in wordpress admin I've produced a webpage known as cher as well as in Page Characteristics > Template I've selected cher because the template. Then when I visit the page the cher toy template cher.php is loaded. That page works fine.

The cher.php calls the header.php first through the get_header(); function. Within the header.php function I connect to jquery-1.5.min.js, jquery.galleriffic.js and mitemiu.js.

Gallerific 2.0 is really a jQuery based gallery plug-in and mitemiu.js is my custom Javascript file which consists of:

  1. Gallerific custom configurations (image transition speed, UI components to become loaded, etc)
  2. Custom function known as toggleSlider() for exhibiting/hiding of the toy selection menu
  3. An argument to operate toggleSlider() once the a element that contains the title doll is clicked on

Relevant files (jquery-1.5.min.js, jquery.galleriffic.js remain pure &lifier untouched by me)


When you attend the page loads and works fine. Whenever you click the dolls link within the top navigation bar the #doll-menu DIV 35mm slides lower/fades in through the toggleSlider() function. Click it again and also the #doll-menu DIV fades out/35mm slides up.

All is okay but, when you attend say every other page on the website (blog, order, about, contact) after which try clicking the toy link, BOOM! It does not work.

Why the toy link only creates all toy pages and this is not on other pages?
Can there be some kind of JS conflict happening?

The href attribute of all of the other links are right. However, the href attrubte from the toy page is "#", which just redirects to the top page.

The like all of the toy pages, it appears right since it would go to the top toy page. But on other pages, it simply goes to the peak of itself. Alternatively pages, just fix the href attribute from the toy link.

it's not focusing on other pages because inside your mitemiu.js the very first function assumes the presence of div id thumbs which doesn't exist outdoors from the dolls page:

jQuery(document).ready(function($) {
    var gallery = $('#thumbs').galleriffic({ ...

It's not getting a div with id "thumbs" and also the relaxation from the JS isn't being loaded. Should you remove this top function in the other pages it really works all right:

Or, if you do not want separate JS files, look for the div using:

if($('#thumbs').length > 0