Apply Highslide as Global Image Viewer

[Gareth]

I have the following setup with WordPress:
WordPress 2.7
Highslide resides in the Plugins folder with the following files:
highslide-full.js
highslide-full.packed.js
highslide.config.js
highslide.css

And then there is the standard graphics folder.
I have also included the following into my Theme Header:
<!-- Highslide Plugin -->
<link rel='stylesheet' type='text/css' href='http://www.crackberry.co.za/wp-content/ ... hslide.css' />
<script type="text/javascript" src="http://www.crackberry.co.za/wp-content/ ... "></script>
<script type="text/javascript" src="http://www.crackberry.co.za/wp-content/ ... "></script>

My current setup as above works well with the use of NextGen Gallery plugin.

Now I also upload images via another plugin for Email/Mobile posting which has its own image folder (Random Image Naming) and then there is the standard WordPress Media Gallery that uses the 'Uploads' folder.

What I am looking for is to have Highslide apply the effect to all folders and Images without having to change code lines for the images as stated in the Tutorials for indivdual images. Also I am not wanting to go back to a post and apply further Custom Fields.

[torstein.honsi]

I am sorry I can't help you with the WordPress spesific stuff, but you can take a look at isUnobtrusiveAnchor for an example of how to apply Highslide to a thumb without adding any special markup to it.

[Gareth]

Torstein, Absolutely magic.... so far so good. This seemed to do the trick and is working across my Media Gallery Images, Mobile Post Images and still holding the effect as normal for NGG and all three options having different image folders. Thank You Very much.... this has put me to ease with keeping highslide.

Added the following to my header.php as is but will work on it to make a call to specific file like the below are setup:

Code: Select all

<script>hs.isUnobtrusiveAnchor = function(el) {
	if (el.href && /\.jpg$/.test(el.href)) return 'image';
}</script>

<!-- Highslide Plugin -->
<link rel='stylesheet' type='text/css' href='http://www.mydomain.com/wp-content/plugins/highslide/highslide.css' />
<script type="text/javascript" src="http://www.mydomain.com/wp-content/plugins/highslide/highslide-full.packed.js"></script>
<script type="text/javascript" src="http://www.mydomain.com/wp-content/plugins/highslide/highslide.config.js"></script>
<script>hs.isUnobtrusiveAnchor = function(el) {
	if (el.href && /\.jpg$/.test(el.href)) return 'image';
}</script>
</head>

[Gareth]

Just moved the script into its own file and called it like the other js and css files in the header and it works perfectly right now.

[Gareth]

With this working in its new js file, I just need to know that the following is satisfactory from a scripting perspective, as it practically does work in local test environment for both file types, not knowing anything about JS scripting, I am going on what seems logical, if there is a better format or simpler way to do this I am open to being corrected:

Code: Select all

hs.isUnobtrusiveAnchor = function(el) {
	if (el.href && /\.jpg$/.test(el.href)) return 'image';
	if (el.href && /\.png$/.test(el.href)) return 'image';
}

If the formatting of the above translates well from me posting this from a mobile device the two IF lines should be on a line of there own.

[torstein.honsi]

The code above is perfectly valid and makes sense. It could be compacted into one single RegExp expression, but RegExp is for experienced scripters and your code does exactly the same.

Code: Select all

hs.isUnobtrusiveAnchor = function(el) {
   if (el.href && /\.(jpg|png)$/.test(el.href)) return 'image';
}

[Gareth]

Thanks once again Torstein, the compacted format make sense. I have a little regex experience but just not in a JS environment, so I will defiantely make use of this rather. I was just not getting this right before doing the double line of code and see where my mistake was.

[ElectroLund]

Sorry for resurrecting a very old thread. I tried applying the above recommendation for making all images on my site use Highslide. It works nicely, but interferes with highslide galleries that are on the same page.

Instead, the hs.isUnobtrusiveAnchor function seems to be preventing the thumbstrip and slideshow controller from loading at all. Instead, the first un-hidden thumb loads the highslide popup by itself.

Here's the test page in question:
http://www.electrolund.com/2012/03/test ... ery-stuff/

[RoadRash]

Hi,

The trick is to add some code to tell the script to avoid images with onclick events.

Code: Select all

hs.isUnobtrusiveAnchor = function(el) {
    if (el.href && /\.(jpg|gif|png)$/.test(el.href) && !el.onclick) {
        el.className = 'highslide'; // for the zoom-in cursor
        return 'image';
    }
};

But this will not work on your single image as long as you have tracking code added in the onclick event since the tracing code and Highslide will not work side by side.

BTW - you need to remove highslide-with-gallery.js from the head section of your page. highslide-full.js contains all the code you need and including both the js files might cause conflicts.

[ElectroLund]

Thanks for the help, roadrash. I took your advice and included only the highslide-full.js now. That was an oversight.