wordpress intergration + Nextgen

[RRG]

I'm somewhat advanced user, but this can't be anymore complicated from where I'm sitting.

I bought the highslide for this simple reason: http://highslide.com/examples/gallery-in-page.html
The gallery in a page. I want that, but in my wordpress post, I don't want to click on a thumb, I want to come to the page and I see the JS effect in the content window able to navigate multiple images I specify.

I use next gen, but don't have to by using the HS editor (id guess). What I'm confused about is making what is at the link above, in multiple posts based on next gen galleries, if possible, and i thought this was a simple plug-in where i could have images, say I want them to be viewed this way (again with the example provided by highslide above) and put them in and be done.

Do I need to use this with a plug-in? Why isn't it a plugin to make this simple like nextgen gallery? I'm a bit confused and the documentation is not so clear at the moment. Maybe I'm missing something, but I don't expect to spend 3 hours going over this stuff and still have something that doesn't work. It looked easy, its not.

I'm on Wordpress 3.0, on a pc, using firefox. I didn't install it using wordpress via the zip upload, but copied all the HS files to the root of where the site is in a folder called Highslide. The coded is in the header like the editor said, but copying in the other code into the body of the wordpress window gives me that gallery icon and even clicking on it don't work. I'm obviously suffering from the leaning curve here. Please help.
RRG

[RoadRash]

Hi,

The in-page gallery is the only type of Highslide gallery that can’t be made in the Highslide Editor.
Highslide is a stand-alone JavaScript image, gallery and media viewer so you don’t have to use it with a plugin.
You may want to read Installation alt. 2: Manual installation

See this post for how to create in-page gallery with NextGEN gallery: viewtopic.php?p=25571#p25571
In addition to this you will need to include the highslide-full.js, highslide.css, highslide-ie6.css and the highslide settings in the header.php file.

[RRG]

Thank you for getting back to me.
I read both of those links you gave me and still no success. Could you please read my response again with some idea of how to sort this out?

Again, i know how to edit code, but i'm no js coder. If I would have known this was going to be this difficult, i'm not sure I would have bought it.

Thank you for reading
RRG

[RoadRash]

I can make you step-by-step instructions, but I need to know if you want to use the NextGEN gallery plugin when creating the in-page galleries or if you want to do it manually (adding HTML code in the HTML view in Wordpress).

[RRG]

That would be really great. I guess what your asking is if I'd like to import the photos into a gallery in nextgen than with your js code be able to run the js viewer from that gallery...I think that would be the easiest way. Yes please and I look forward to seeing it.

[RoadRash]

Highslide in-page gallery with NextGEN gallery plugin for Wordpress

Upload the highslide folder with all its content to the wordpress plugins folder (wp-content/plugins).

Log in to your Wordpress and go to Dashboard => Appearance => Editor and open header.php.
Add this right before the closing head tag </head>:

Code: Select all

<script type="text/javascript" src="http://www.your-domain.com/wp-content/plugins/highslide/highslide-full.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.your-domain.com/wp-content/plugins/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.your-domain.com/wp-content/plugins/highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript">
//<![CDATA[
hs.graphicsDir = 'http://www.your-domain.com/wp-content/plugins/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
   //slideshowGroup: 'group1',
   interval: 5000,
   repeat: true,
   useControls: true,
   overlayOptions: {
      position: 'bottom right',
      offsetY: 50
   },
   thumbstrip: {
      position: 'above',
      mode: 'horizontal',
      relativeTo: 'expander'
   }
});

// Options for the in-page items
var inPageOptions = {
   //slideshowGroup: 'group1',
   outlineType: null,
   allowSizeReduction: false,
   wrapperClassName: 'in-page controls-in-heading',
   useBox: true,
   width: 600,
   height: 400,
   targetX: 'gallery-area 10px',
   targetY: 'gallery-area 10px',
   captionEval: 'this.thumb.alt',
   numberPosition: 'caption'
};

// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
   document.getElementById('thumb1').onclick();
});

// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
   if (/in-page/.test(this.wrapper.className))   return hs.next();
}

// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
   if (/in-page/.test(this.wrapper.className))   return false;
}
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
   if (/in-page/.test(this.wrapper.className))   return false;
}

// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
   var i, exp;
   hs.getPageSize();

   for (i = 0; i < hs.expanders.length; i++) {
      exp = hs.expanders[i];
      if (exp) {
         var x = exp.x,
            y = exp.y;

         // get new thumb positions
         exp.tpos = hs.getPosition(exp.el);
         x.calcThumb();
         y.calcThumb();

         // calculate new popup position
          x.pos = x.tpos - x.cb + x.tb;
         x.scroll = hs.page.scrollLeft;
         x.clientSize = hs.page.width;
         y.pos = y.tpos - y.cb + y.tb;
         y.scroll = hs.page.scrollTop;
         y.clientSize = hs.page.height;
         exp.justify(x, true);
         exp.justify(y, true);

         // set new left and top to wrapper and outline
         exp.moveTo(x.pos, y.pos);
      }
   }
});
//]]>
</script>

<style type="text/css">
   .highslide-image {
      border: 1px solid black;
   }
   .highslide-controls {
      width: 90px !important;
   }
   .highslide-controls .highslide-close {
      display: none;
   }
   .highslide-caption {
      padding: .5em 0;
   }
</style>

Change the highlighted paths!

Go to Dashboard => Gallery => Options => Effects. Choose Highslide as JavaScript Thumbnail effect.
Remove the content of the Link Code box and add this:

Code: Select all

id="thumb1" class="highslide" onclick="return hs.expand(this, inPageOptions)"

(This will make ugly HTML code because it will add id="thumb1" to all the images, and an id should be unique... But, as far as I know, this is the only way we can add id to the first thumb when using NextGEN.)

Creat your NextGEN gallery.

Open the post/page where you want to have your gallery. Click the HTML tab and add this:

Code: Select all

<div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver; overflow: hidden"><div style="visibility: hidden;">[nggallery id=1]</div></div>

Change the id number to the id of your gallery (highlighted).

If you need to change the width and/or height of your gallery, you need to do changes two places: in the inPageOptions code you added to the header.php and in the inline CSS for the gallery-area div (both places highlighted).

Code: Select all

// Options for the in-page items
var inPageOptions = {
   //slideshowGroup: 'group1',
   outlineType: null,
   allowSizeReduction: false,
   wrapperClassName: 'in-page controls-in-heading',
   useBox: true,
   width: 600,
   height: 400,
   targetX: 'gallery-area 10px',
   targetY: 'gallery-area 10px',
   captionEval: 'this.thumb.alt',
   numberPosition: 'caption'
};

Code: Select all

<div id="gallery-area" style="width: 620px; height: 520px; margin: 0 auto; border: 1px solid silver; overflow: hidden"><div style="visibility: hidden;">[nggallery id=1]</div></div>

[RRG]

Thank you Roadrash, I was able to get it to work...sort of. Maybe you can make some sense of this...
So when I do add in the html code into a post with the corresponding gallery ID it does work. But then I have other added gallerys that I didn't add in using the code ((( [nggallery id=15] ))) and when I visit that page, expecting a list of thumbs, the Js effect comes up. Not really what I wanted, but if I had to guess its because of the code I put into the effects window in nextgen gallery. I tried changing the effect to another one of the out of the box effects gallery comes with and the effect worked on the thumbnails, but the scroll bar gallery landing page that you set up for me, didn't.

I guess the question is, can I still have a thumbnail list from the nextgen gallery that will just open to the simple js popup window effect on all thumbs, but on a few pages that I add in the html code you gave me have that nice scroll bar on top and the larger preview when landing on a page?? that is really what I'm going for. I can't have it on all popup instances.

Thank you again and I think we're almost there. You're amazing and I'm excited to make this work.
RRG

[RoadRash]

Using two different types of Highslide galleries when using NextGEN requires a different approach and some new coding.
I’ve never tried with a regular thumb gallery + in-page gallery, but it should work.
See this page for how to make two different regular thumb galleries: http://roadrash.no/hswp/2010/02/multipl ... s-nextgen/

[RRG]

Hi roadrash,
I'm not seeing this working out as what you created for me above is dependent on that bit of code that gets pasted in the js window for the effect in nextgen. I want the general hs code so when I make a gallery with nextgen that I can use the effect to open and view the thumbs in a larger preview on any given page. On a few pages I want to do the in-gallery-page or what you see here: http://highslide.com/examples/gallery-in-page.html

If I had to guess, the code in the nextgen js window will revert to the original code, then I'll have to paste into the html window a specific code to bring up a in-page gallery like the link above. I don't mind making the code specific to a gallery, but why I originally started this is that it seemed like I had to make thumbs with larger previews on my own rather than being able to use the generator or nextgen. Its one of those why reinvent the wheel sort of things. You tell me, you're the pro at this. I just want to make it work.

Thank you again for reading and helping.
RRG

[RoadRash]

I had to do some thinking, but I can’t come up with any easy solution for using both regular galleries and in-page galleries in the same site with NextGEN. The in-page gallery requires that the first image has a unique id, and there are now way we can add an id without changing the code in the NextGEN js window – and changing the code will break the regular galleries.

The solution is: Use NextGEN to create the regular galleries, and add the in-page galleries manually.
See this how-to: http://roadrash.no/hswp/2010/07/manuall ... e-gallery/
You can use the Highslide Editor to create the thumbs and the large images for the in-page galleri, but the editor can’t create the HTML code.

[RRG]

Thanks again RR for getting back to me.

Just so I can get my mind around this...

For the JS effect - I can use the HS editor to make changes to the js effect on click of a thumb created in a nextgen gallery.

For the in-window js gallery, I have to do it manually and I can make the thumbs with the HS editor. Take the html you gave me and paste it into the html tab in Word press. Then swap out all the file names of the thumbs and larger previews to their location on my server.

Is this correct?

I think I can get that done with the info you gave me. I'll wait your response before I try. As well, can you direct me to what file or a online link to where I would manually change options for the in-window gallery to customize it? Oh, and what would be the HS code to put back into the nextgen code window for the effect?

Thank you so much.
RRG

[RoadRash]

Regular galleries:
Follow this how-to for regular galleries made by Hihgslide Editor and NextGEN: http://roadrash.no/hswp/?p=55
Dashbord => Gallery => Options => Effects => JavaScript Thumbnail effect = Highslide and Link Code line:

Code: Select all

class="highslide" onclick="return hs.expand(this, { slideshowGroup: %GALLERY_NAME% })"

In-page galleries:

For the in-window js gallery, I have to do it manually and I can make the thumbs with the HS editor. Take the html you gave me and paste it into the html tab in Word press. Then swap out all the file names of the thumbs and larger previews to their location on my server.

That’s correct, but you also need to add the code in header.php as described here: http://roadrash.no/hswp/2010/07/manuall ... e-gallery/

As well, can you direct me to what file or a online link to where I would manually change options for the in-window gallery to customize it?

The size of the gallery is controlled by this in the code you have to place in header.php:

Code: Select all

width: 430,
height: 287,

And in this part of the HTML code:

Code: Select all

<div id="gallery-area" style="width: 450px; height: 405px; ......

This part controls the positon of the controlbar and the thumbstrip:

Code: Select all

hs.addSlideshow({
slideshowGroup: 'in-page',
interval: 5000,
repeat: true,
useControls: true,
overlayOptions: {
position: 'bottom right',
offsetY: 50
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander'
}
});

Oh, and what would be the HS code to put back into the nextgen code window for the effect?

NextGEN isn’t involved when making the in-page gallery so you don’t have to do any changes there.

[RRG]

RR-
I've got it working, but still not correct.

So the in-window hs gallery is working and I've been able to make changes to how it works.

At the same time, I'm able to get the HS js effect to work with next gen gallery.

But...
If I want the black out effect or when you click, it opens the js effect and darkens the rest of the window on the full size preview of the thumb you just clicked...If I add that effect, the in-window gallery also does the same when I visit that page. If I had to guess, I'll have to add some special code to the nextgen js effect window to pick a "group1" or something and make some changes in the higslide.config.js file. I followed your directions to get this to work here: editor-code-with-nextgen-gallery/" class="postlink">http://roadrash.no/hswp/2010/02/single-type-of-highslide-gallery-using-highslide-editor-code-with-nextgen-gallery/

please help, we are about there. I hope this can help other people, I can't be the only one wanting to do this.
Thanks again
RRG

[RRG]

I think you missed the "but" bit...

If I want the black out effect or when you click, it opens the js effect and darkens the rest of the window on the full size preview of the thumb you just clicked...If I add that effect, the in-window gallery also does the same when I visit that page. If I had to guess, I'll have to add some special code to the nextgen js effect window to pick a "group1" or something and make some changes in the higslide.config.js file. I followed your directions to get this to work here: editor-code-with-nextgen-gallery/">http://roadrash.no/hswp/2010/02/single- ... n-gallery/

RRG

[RoadRash]

You can remove the dimmed background from the in-page gallery by adding dimmingOpacity: 0, to the var inPageOptions code.

Code: Select all

// Options for the in-page items
var inPageOptions = {
   slideshowGroup: 'in-page',
   outlineType: null,
   dimmingOpacity: 0,
   allowSizeReduction: true,
   wrapperClassName: 'in-page controls-in-heading',
   useBox: true,
   width: 430,
   height: 287,
   targetX: 'gallery-area 10px',
   targetY: 'gallery-area 10px',
   captionEval: 'this.a.title',
   numberPosition: 'caption',
   transitions: ['expand', 'crossfade']
}