How to create your example gallery

[ebuckland]

Hi

I have just activated the flickr + highslide plugin on my wordpress blog and I am not sure what to do now. I can get a basic gallery to work just fine, but it is just a collection of thumbnails.

I really like the Inpage Thumbstrip below caption example seen here http://www.roadrash.no/hs-support/galle ... strip.html and would love to know how to achieve that.

I currently just upload images to my media library but I could install NextGen if needed. If it is a case of changing the css can you let me know where to change it and what to add.

Thanks

Elaine

[RoadRash]

Hi Elaine,

See this demo page: http://roadrash.no/hswp/2010/07/manuall ... e-gallery/
The in-page gallery must be coded manually, and it requires highslide-full.packed.js instead of highslide-with-gallery.packed.js.
The Flickr + Highslide plugin doesnÔÇÖt come with highslide-full.packed.js so you need to pick up this file from the Highslide download package and upload it to the highslide folder in the flickr-highslide plugin folder (wp-content/plugins/flickr-highslide/highslide/)
Open header.php and find a line similar to this:

Code: Select all

<script type='text/javascript' src='http://www.yourdomain.com/wp-content/plugins/flickr-highslide/highslide/highslide-with-gallery.packed.js'></script>

Change it to:

Code: Select all

<script type='text/javascript' src='http://www.yourdomain.com/wp-content/plugins/flickr-highslide/highslide/[hilight]highslide-full.packed.js[/hilight]'></script>

[ebuckland]

Thank you so much for your quick reply, I have decided to make it easy on myself and just use Highslide and NextGen. So I have downloaded Highslide, and installed the Nextgen plugin.

Please can you tell me what to upload from the highslide download, and where to upload it. I have spent hours trying to get this to work and must be missing something. Your test wp post with the inpage gallery is exactly what I am after can you give me a simple set of instructions, I would be really grateful. I love the way this JS works and looks but I just can't get it to do anything on my wordpress site.

Cheers, Elaine

[RoadRash]

You donÔÇÖt need any plugin at all to create a Highslide in-page gallery in Wordpress.
Deactivate/remove both plugins and follow these step-by-step instructions:

• Download the Highslide zip file from the download page and unzip it.
• Open the highslide folder and create a new folder inside the highslide folder named images.
  Create the images and thumbnails you want to use in your gallery and save them in the images folder.
  Note: You need two version of each image - one large image and one small image (thumbnail)
• Upload the highslide folder to the root of your web site.
• Open header.php (Wordpress Dashboard => Appearance => Editor => find header.php in the right column) and add this right before the closing head tag (</head>):

  Code: Select all

  <!-- START HIGHSLIDE -->
  <script type="text/javascript" src="/highslide/highslide-full.min.js"></script>
  <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
  <!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="/highslide/highslide-ie6.css" />
  <![endif]-->
  <!-- END HIGHSLIDE -->
  
  <!-- START CODE FOR MANUALLY ADDED HIGHSLIDE IN-PAGE GALLERY -->
  <script type="text/javascript"> 
  //<![CDATA[
  hs.graphicsDir = '/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: 'in-page',
  	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: 'in-page',
  	outlineType: null,
  	allowSizeReduction: false,
  	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'
  }
   
  // 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> 
   
  <!--
  	3) Modify some of the styles
  --> 
  <style type="text/css"> 
  	.in-page .highslide-image {
  		border: 1px solid black;
  	}
  	.in-page .highslide-controls {
  		width: 90px !important;
  	}
  	.in-page .highslide-controls .highslide-close {
  		display: none;
  	}
  	.in-page .highslide-caption {
  		padding: .5em 0;
  	}
  	.highslide-active-anchor img {
   		visibility: hidden;
   	}
  </style> 
  <!-- END CODE FOR MANUALLY ADDED IN-PAGE GALLERY -->

• Open your post/page in HTML view and add this HTML code:

  Code: Select all

  <div id="gallery-area" style="width: 450px; height: 405px; margin: 0pt auto; border: 1px solid silver; overflow: hidden;">
  <div style="visibility: hidden;"><a id="in-page" title="Two cabins" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image01.jpg">
  <img src="/highslide/images/image01.thumb.jpg" alt="" /></a>
  <a title="Patterns in the snow" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image02.jpg">
  <img src="/highslide/images/image02.thumb.jpg" alt="" /></a>
  <a title="Cabins" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image03.jpg">
  <img src="/highslide/images/image03.thumb.jpg" alt="" /></a>
  <a title="Old stone cabins" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image04.jpg">
  <img src="/highslide/images/image04.thumb.jpg" alt="" /></a>
  <a title="A litte open water" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image05.jpg">
  <img src="/highslide/images/image05.thumb.jpg" alt="" /></a>
  <a title="Dipper" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image06.jpg">
  <img src="/highslide/images/image06.thumb.jpg" alt="" /></a>
  <a title="Dipper" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image07.jpg">
  <img src="/highslide/images/image07.thumb.jpg" alt="" /></a>
  <a title="Mountain" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image08.jpg">
  <img src="/highslide/images/image08.thumb.jpg" alt="s" /></a>
  <a title="Birch trees" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image09.jpg">
  <img src="/highslide/images/image09.thumb.jpg" alt="" /></a>
  <a title="Highland woods" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image10.jpg">
  <img src="/highslide/images/image10.thumb.jpg" alt="" /></a>
  <a title="Frozen lake" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image11.jpg">
  <img src="/highslide/images/image11.thumb.jpg" alt="" /></a>
  <a title="Spring in the mountains" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image12.jpg">
  <img src="/highslide/images/image12.thumb.jpg" alt="" /></a>
  <a title="Spring in the mountains" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image13.jpg">
  <img src="/highslide/images/image13.thumb.jpg" alt="" /></a>
  <a title="Fjord landscape" onclick="return hs.expand(this, inPageOptions)" href="/highslide/images/image14.jpg">
  <img src="/highslide/images/image14.thumb.jpg" alt="" /></a>
  </div>
  </div>

  Note: Replace the image file names with your own, and replace the text in the title attribute with the text you want to appear in the caption.

[ebuckland]

Hi

Thanks for the information about just using Highslide, I am building this website for a friends portfolio and he really wants the photos to link from Flickr and use the style of the inpage thumbstrip example page here but with the thumbnails at the bottom.

http://highslide.com/examples/gallery-in-page.html

So I have reloaded the original Awake theme, added flickr-highslide and changed the full-packed file and the header.php as you instructed.

This is as far as the page has got so far, it shows his flickr photos and now I would love to make it look like the gallery inpage example.

http://colinmorisonphotography.com/theg ... all-photos

So what I would like to do is have slightly bigger thumbnails, have them at the bottom and have the controls etc look like your example page. Also is it possible to somehow link seperate photosets from Flickr on different pages in Wordpress? This is almost perfect now and I am so grateful for your help and the Highslide JS

I really appreciate your help on this and i have asked Colin to purchase a licence for Highslide this weekend as well because I think his site is going to be commercial in the end.

Thanks

Elaine

[RoadRash]

Larger thumbs in the thumbstrip
Do changes in this part of the highslide.css file:

Code: Select all

.highslide-thumbstrip-horizontal img {
	width: auto;
	[hilight]height: 60px; /* was 40px */[/hilight]
}
.highslide-thumbstrip-horizontal .highslide-marker {
	[hilight]top: 67px; /* was 47px */[/hilight]
	border-left-width: 6px;
	border-right-width: 6px;
	border-bottom: 6px solid gray;
}

If all your thumbs will have the same width as height, you should add the width to the CSS too.

Code: Select all

.highslide-thumbstrip-horizontal img {
	[hilight]width: 60px; /* was auto */[/hilight]
	height: 60px; /* was 40px */
}

Move the thumbstrip to the bottom
Replace this:

Code: Select all

	thumbstrip: {
		position: 'above',
		mode: 'horizontal',
		relativeTo: 'expander'
	}

with this:

Code: Select all

	thumbstrip: {
		position: 'bottom center',
		mode: 'horizontal',
		relativeTo: 'expander',
		width: '600px', // Must be same with as the width in the inPageOptions
		offsetY: 130
	}

Also is it possible to somehow link seperate photosets from Flickr on different pages in Wordpress?

I canÔÇÖt give you an answer on this since IÔÇÖm not familiar with the third-party flickr+highslide plugin.

[ebuckland]

Hi

Thanks again, I got most of the changes to work and it looks great. The reason we went with flickr-highslide was because I couldn't get highslide to pull photos from an Nextgen Gallery. I know it's possibly to install the photos in the Highslide folder on my website and upload them but the photographer that I am working for would like an easy way of adding them to Wordpress and then pulling them in to the highslide gallery.

I read a post for a blog that you helped with that combined NextGen and Highslide is there a way for me to make that work on my website? I am sorry to ask so many questions and I appreciate all your help. I haven't been able to get Nextgen and Highslide to work myself but thought I would ask you if it is possible and how would I do it?

Cheers and if its not possible then I am happy with the changes you have already helped me make.

Thanks

elaine

[RoadRash]

You can try this step-by-step: http://www.highslide.com/forum/viewtopi ... 747#p32747
Be aware that this will not create valid HTML markup because the same id is added to all the images.