It is currently Tue Oct 21, 2014 6:44 pm Advanced search

Highslide Mini Gallery in WordPress.

Technical support, bug reports, feature requests and more.

Highslide Mini Gallery in WordPress.

Postby 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.
cubikated
 
Posts: 23
Joined: Sun Jun 13, 2010 10:42 pm

Re: Highslide Mini Gallery in WordPress.

Postby 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)
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Highslide Mini Gallery in WordPress.

Postby 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?
cubikated
 
Posts: 23
Joined: Sun Jun 13, 2010 10:42 pm

Re: Highslide Mini Gallery in WordPress.

Postby 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.
cubikated
 
Posts: 23
Joined: Sun Jun 13, 2010 10:42 pm

Re: Highslide Mini Gallery in WordPress.

Postby cubikated » Mon Apr 04, 2011 1:19 pm

this is actually what is actually happening now....the full size image is not loading.
Attachments
gallery.jpg
This is what's happening now.
gallery.jpg (15.67 KiB) Viewed 2351 times
cubikated
 
Posts: 23
Joined: Sun Jun 13, 2010 10:42 pm

Re: Highslide Mini Gallery in WordPress.

Postby 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:
cubikated
 
Posts: 23
Joined: Sun Jun 13, 2010 10:42 pm

Re: Highslide Mini Gallery in WordPress.

Postby 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!!!! :lol:

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="[hilight]/[/hilight]wp-content/uploads/2011/04/sample.gif"><img src="[hilight]/[/hilight]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="[hilight]/[/hilight]wp-content/uploads/2011/04/sample.gif"><img src="[hilight]/[/hilight]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
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Highslide Mini Gallery in WordPress.

Postby 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
animedo
 
Posts: 2
Joined: Fri Feb 10, 2012 9:09 pm

Re: Highslide Mini Gallery in WordPress.

Postby 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.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9199
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Highslide Mini Gallery in WordPress.

Postby 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
animedo
 
Posts: 2
Joined: Fri Feb 10, 2012 9:09 pm

Re: Highslide Mini Gallery in WordPress.

Postby 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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway


Return to Highslide JS Usage

Who is online

Users browsing this forum: No registered users and 2 guests

cron