Add Highslide Gallery functionality

Hi Alexander!

As of now there's not a way out of the box to create a highslide gallery, but I'm open to patches for this funcitonality! Thanks...

Also, I'm wondering how the gallery should function.. Should it group all images of a single node that use the same highslide formatter, or all images on the page, no matter what node they are attached to?

Alexander, If I'm understanding you correctly, each of the "galleries" that you see on http://sprocketcreative.com are actually views using views carousel.

The sliding effect is views carousel but I think what he means is the highslide has a gallery functionality because it can scroll through other pictures in the carousel like a gallery. When you click on an image in the carousel, the highslide box comes up and when you press left or right, it moves to the next image. I'd like to know how to do that, too. :)

Hi Roger!

Hmm, I hadn't noticed that we actually hand wrote the HighSlide implementation for http://sprocketcreative.com to use the gallery functionality. We haven't had the time to write that back into the HighSlide module. We've had people interested, but no solid bites yet! If you are interested in sponsoring this functionality, shoot me a message!

Thanks,
James

Marked #680930: Scrollable trumbnails as a duplicate of this issue.

Being able to use the arrow keys to navigate the Highslide images is already working in Highslide module. If you want to have actual navigation, I believe that is all achieved by CSS, although I haven't had the need to try it myself.

#701152: Previous/Next Buttons is related.

The original question has still not been answered, or at least my variation hasn't. I am a newbie. I've downloaded and configured everything. But how do I get it on a page, and how do I tell it where the pics are?

SUBSCRIBE

DFWalton, I'm not sure if you are trying to hookup highslide with flickr or not. If you are then take a look at http://ethancodes.com/2010/03/flickr-galleries-for-drupal/

The only thing I am not clear on is where to add that jQuery function within my Drupal installation...still trying to figure that out

Edit: That jQuery function will need to be added to page.tpl.php file of the current theme you are using

I have a thumbnail style gallery working.
I followed some of the instructions from here.
http://highslide.com/forum/viewtopic.php?f=1&t=5314&p=25255

My version went like this.

1. Install the Highslide Module

2. Download your preferred gallery from the Highslide editor, http://highslide.com/editor/ and replace everything in the modules/highslide/highslide directory with your custom download.

3. Insert this highslide reference in your template page.tpl.php file (i added it to the body, not head)

<script type="text/javascript" src="/sites/all/modules/highslide/highslide/highslide.config.js" charset="utf-8"></script>

4. Change almost all the code from the highslide.js in your /sites/all/modules/highslide directory to the following.

$(function () {
  $('a.highslide').each(function() {
    this.onclick = function() {
      return hs.expand(this);
    }
  });
  var settings = Drupal.settings.highslide.options;
  hs.graphicsDir = settings.graphicsDir;
});

5. Set the correct path to your graphics directory in your highslide.config.js file. I had to add the full url, though a relative path may work for some, not sure.

hs.graphicsDir = 'http://example.com/sites/all/modules/highslide/highslide/graphics/';

6. I set up an imagechache preset for the images i want to show. Then I set up an imagefield (http://drupal.org/project/filefield) in my Content Type and set the uploads on that field to unlimited to get achieve a group of images on that node. Use the Highslide Formatter option in the Display Fields section in your Content Type. Save Content.

Click one of the images and you should be able to scroll through your gallery.

Note: Seems to break when I use the jquery update module.

Thanks

#15 was a good start for the highslide.js part.

All I did was:
I configured a gallery on http://highslide.com/editor/

then, replace the files inside
sites/all/modules/highslide/highslide
with your custom generated files. That is at minimum:
- replace graphics folder
- replace highslide.css
- put in your desired js file like "highslide-with-gallery.packed.js"
- put in highslide.config.js
- put in easing_equations.js (dunno if it is needed)

in highslide.config.js:
comment out
hs.graphicsDir = 'highslide/graphics/';
it is not needed here. gets set via drupal:

in the original highslide.js brought by the module in sites/all/modules/highslide/
replace everything with this:

$(function () {
  $('a.highslide').each(function() {
    this.onclick = function() {
      return hs.expand(this, config1);
    }
  });
  var settings = Drupal.settings.highslide.options;
  hs.graphicsDir = settings.graphicsDir;
});

this differs from #15. I had to add ',config1' to the expand.
this is also the part where the graphics dir gets set.

in the highslide.module we have to modify 2 lines:
function highslide_add_files() {
here we add the config. paste
drupal_add_js($path .'/highslide/highslide.config.js');
after
drupal_add_js($js_path);

then, in
function _highslide_js_path() {
add the name of the js file you want to use. I've added the packed gallery there. example:
$files = array('highslide-full.min.js', 'highslide-full.js', 'highslide-full.packed.js', 'highslide-with-gallery.packed.js');

I've jquery update running with "Production (Minified)"