Highslide Mini Gallery in WordPress.

by **cubikated** » Mon Apr 04, 2011 2:53 am

Hi,

Can anyone tell me how to insert a Highslide Mini Galley in to WordPress? Can I do it through Dreamweaver or through the Admin Panel? A bit lost here....please help.

Thanks.

by **RoadRash** » Mon Apr 04, 2011 5:07 am

Hi,

Create your gallery in the Highslide Editor (upload your images using the Image Manager). Download and unzip. Upload the highslide folder to the root of your web site.

Go to your Wordpress Admin Panel => Appearance => Edtior => open Header (header.php). Add the js files and CSS files somewhere between <head> and </head> (The exact code to add can be found in the head section in the highslide-custom-example.htm from the downloaded zip archive.)
Exactly where in header.php to add it depends on the theme you are using. Be careful so you don’t break anything (php functions)!
Remember to click the Update File button when you are finished.

Open highslide-custom-example.htm in Dreamweaver (or similar) and remove all line breaks in the HTML code for the gallery between the body tags (you don’t need this part: <h3>Gallery</h3>). The code should now appear as one long line.
Go to the Wordpress Admin Panel and open the post/page where you want to have your mini gallery. Click on the HTML tab and paste the HTML code for the gallery. Click Update.
You should now have a working mini gallery in Wordpress.

(NOTE: This procedure requires that you don't have any other Highslide plugins installed in Wordpress)

by **cubikated** » Mon Apr 04, 2011 12:05 pm

Hi RoadRash,

I'm working on localhost. I have created my own theme hacking the twenty ten default theme. so far so good.
in the root folder i created a the folder js and put all the highslide .js and .css in there.
I have all my images in my images folder in my root folder.

this is the code i have in the header.php

Code: Select all: <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php /* * Print the <title> tag based on what is being viewed. */ global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <script type="text/javascript" src="js/highslide-with-gallery.js"></script> <script type="text/javascript" src="js/highslide.config.js" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="js/highslide.css" /> <?php /* We add some JavaScript to pages with the comment form * to support sites with threaded comments (when in use). */ if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); /* Always have wp_head() just before the closing </head> * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to <head> such * as styles, scripts, and meta tags. */ wp_head(); ?> </head>

I removed all the line breaks and the thumb appears fine. but the second thumb in the hidden container as well. also, onclick no highslide action takes place.

have i not called the highslide .js and .css in the heard.php right? oh boy this is so much simpler with a normal html site!!!!

what am i doing so wrong?

by **cubikated** » Mon Apr 04, 2011 1:02 pm

here's my mini gallery code

Code: Select all: <div class="highslide-gallery"><a id="thumb1" class="highslide" title="Caption from the anchor's title attribute" onclick="return hs.expand(this, config1 )" href="http://localhost/Wordpress/wp-content/uploads/2011/04/sample.gif"><img src="http://localhost/Wordpress/wp-content/uploads/2011/04/sample.gif" alt="" /></a><div class="hidden-container"><a class="highslide" title="Caption from the anchor's title attribute" onclick="return hs.expand(this, config1 )" href="http://localhost/Wordpress/wp-content/uploads/2011/04/sample.gif"><img src="http://localhost/Wordpress/wp-content/uploads/2011/04/sample.gif" alt="" /></a></div></div>

now its loading but no pop-up?

Code: Select all: hs.addSlideshow({ slideshowGroup: 'group1', interval: 5000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { opacity: '0.75', position: 'bottom center', offsetX: '0', offsetY: '+50', hideOnMouseOut: true }, thumbstrip: { mode: 'horizontal', position: 'above', relativeTo: 'image' } }); var config1 = { slideshowGroup: 'group1', thumbnailId: 'thumb1', numberPosition: 'caption', transitions: ['expand', 'crossfade'] };

i'm nearly there please help.

by **cubikated** » Mon Apr 04, 2011 1:19 pm

this is actually what is actually happening now....the full size image is not loading.

by **cubikated** » Mon Apr 04, 2011 2:03 pm

okay it's working now!!!!! had to change the url for the graphics dir :wink:

mwahhhhhhh i love highslide.

one important question. how would all this url's effect once i put it online? would i have to change them one by one manually? brain wrecker again!!!! :lol:

by **RoadRash** » Mon Apr 04, 2011 6:56 pm

cubikated wrote:one important question. how would all this url's effect once i put it online? would i have to change them one by one manually? brain wrecker again!!!!

I’m not used to work on localhost.

Will absolute paths work - like this?

Code: Select all: <div class="highslide-gallery"><a id="thumb1" class="highslide" title="Caption from the anchor's title attribute" onclick="return hs.expand(this, config1 )" href="/wp-content/uploads/2011/04/sample.gif"><img src="/wp-content/uploads/2011/04/sample.gif" alt="" /></a><div class="hidden-container"><a class="highslide" title="Caption from the anchor's title attribute" onclick="return hs.expand(this, config1 )" href="/wp-content/uploads/2011/04/sample.gif"><img src="/wp-content/uploads/2011/04/sample.gif" alt="" /></a></div></div>

If they do, you don’t need to change the url when uploading to the live server. (You can do the same with the js and CSS files in header.php and with the path for hs.graphicsDir - if it works.)
I’m afraid you need to change the url’s when uploading to the live server if absolute paths doesn’t work…

by **animedo** » Fri Feb 10, 2012 9:23 pm

Hi,

I've just found this information about HS mini gallery and I'd like to know if is possible to use Mini Gallery while I already have HS instaled (I noticed remark in explanation above that "This procedure requires that you don't have any other Highslide plugins installed in Wordpress".
In fact what I'd like to have is possibility to have galleries on certain pages, whith only one thumnail (or image) like this is in MIni Gallery. Here is link to page where I'd like to have several different galeries, presented by one (start) image.
http://safcakovec.org/video
Is this possible to do somehow and also, is it possible to have different presentation on different pages (post)?

thaks in advance,

animedo

by **torstein.honsi** » Mon Feb 13, 2012 1:04 pm

Hi Animedo,

From Highslide JS's perspective it is fully possible to combine different setups in the same page. However it depends on how your WordPress plugins are designed, but that is out of our scope, so if you have problems with it please contact the plugin authors.

by **animedo** » Fri Feb 17, 2012 9:00 pm

Hi,
I am not sure if I understood the answer completelly - I don't use any other plugin for galleries / single image, but Higslide... But, it is good to hear that it is possible. Is there any examples about how to change
gallery in mini gallery - so far I can't find any on this forum...
My temporary and working HSconfig.js is

Code: Select all: /** * Site-specific configuration settings for Highslide JS */ $(document).ready(function() { hs.graphicsDir = 'http://safcakovec.org/highslide/graphics/'; hs.outlineType = 'custom'; hs.dimmingOpacity = 0.6; hs.dimmingDuration = 100; hs.easing = 'easeInCirc'; hs.expandDuration = 200; hs.restoreDuration = 200; hs.align = 'center'; hs.padToMinWidth = true; hs.marginBottom = 105; hs.captionEval = 'this.thumb.title'; // Add the slideshow controller hs.addSlideshow({ slideshowGroup: (function() { var groups = []; $('.gallery').each(function(i, $item) { groups.push($item.id); }); return groups; })(), interval: 5000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { className: 'large-dark', opacity: 0.6, position: 'bottom center', offsetX: 0, offsetY: -60, relativeTo: 'viewport', hideOnMouseOut: false }, thumbstrip: { mode: 'horizontal', position: 'bottom center', relativeTo: 'viewport' } }); // hs.numberPosition = 'caption'; hs.transitions = ['expand', 'crossfade']; // for gallery $('.gallery-item a').addClass('highslide'); $('.gallery-item a').each(function() { this.onclick = function() { return hs.expand(this, { slideshowGroup: this.parentNode.parentNode.parentNode.id }); }; }); // For single images hs.onSetClickEvent = function(sender, e) { e.element.onclick = function() { return hs.expand(this, singleConfig); } return false; }; var singleConfig = { slideshowGroup: 'single-image', outlineType: 'rounded-white', numberPosition: null, dimmingOpacity: 0.6 }; hs.registerOverlay({ slideshowGroup: 'single-image', html: ' <div class="closebutton" onclick="return hs.close(this)" title="Close"></div>', position: 'top right', fade: 2 }); });

animedo

by **RoadRash** » Thu Feb 23, 2012 2:28 pm

Sorry for the late reply.
I can see from your highslide.config.js file that you are using the method from my “Highslide JS gallery in Wordpress” blog.
The text for image 2 in this page http://roadrash.no/wp-highslide/how-to- ... e-gallery/ says:

There is one limitation: You can’t use galleries with one visible thumbnail like in ‘Gallery: Minigallery’ and ‘Gallery: Box with thumbstrip above image’.

So mini gallery isn’t possible when using this method because the native gallery function in Wordpress can’t handle it.

You can of course have mini galleries in Wordpress, but you will have to code everything manually.

Our support has moved

Highslide Mini Gallery in WordPress.

Highslide Mini Gallery in WordPress.

Re: Highslide Mini Gallery in WordPress.

Re: Highslide Mini Gallery in WordPress.

Re: Highslide Mini Gallery in WordPress.

Re: Highslide Mini Gallery in WordPress.

Re: Highslide Mini Gallery in WordPress.

Re: Highslide Mini Gallery in WordPress.

Re: Highslide Mini Gallery in WordPress.

Re: Highslide Mini Gallery in WordPress.

Re: Highslide Mini Gallery in WordPress.

Re: Highslide Mini Gallery in WordPress.

Who is online