JimB
Posts: 4
Joined: Wed Sep 02, 2009 9:01 pm

Brilliant! And a couple of questions...

I love this Highslide Editor! It's everything I need in a nice little package. I'll be buying the single user license tonight, but I want you to consider: I would gladly pay twice the price if the license included a downloadable "editor" application. Something that allowed me to save my customizations in sticky format. As it is now, I'll need to reset all of the variables every time I need a different style of gallery, then reset again every time I need to go back to my standard style. A desktop editor would make my site updates sooo much easier and quicker: Point to a folder of images, select my customized settings from a drop down menu, edit thumb cations, publish.

Anyway, here is my site:

http://jimbaileyphoto.com/

Everything works great until I view it on a small screen (my laptop). On the small screen, when I click on any thumbnail the image opens fine, navigation is visible, no scroll bars. But when I navigate (using arrows or keyboard), scroll bars appear and the navigation arrows are partially hidden. Plus, when I click on a thumb, it seems to quickly shift a pixel or two and then quickly shift back. Any help appreciated and congratulations on a really great program.

JB
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Brilliant! And a couple of questions...

Thanks JB!

When building this tool I considered a desktop application, but web applications have some great advantages. For example it is much quicker for the user to get started, it is always kept updated and you can access it anywhere and from any platform. What you propose has been planned in the editor from the start but it didn't make it into the first release. If you take a look inside your downloaded zip file or on your FTP server, you'll find a file called editor.config.js. In the future you will be able to open this config file in the Editor and reset it to the options used. Perhaps user accounts would be a good idea too. So you can save the settings from all your different sites, and keep them right here on the highslide.com server.

On the scrollbars issue, I think this will be fixed if you implement the new dimmer logic tested here: http://highslide.com/studies/fixed-dimmer.php. See the source code and paste everything between "Fixed dimmer mod" and "End fixed dimmer mod" into the head section of your web page. This will be included in the next release of Highslide.
Torstein Hønsi
CTO, Founder
Highsoft
JimB
Posts: 4
Joined: Wed Sep 02, 2009 9:01 pm

Re: Brilliant! And a couple of questions...

Thanks for the speedy reply!

Being able to load settings from the editor.config.js file would be a welcome addition to an already great program. User accounts would also work, esp. if I could store customized settings and load them at will.

One of the reasons that I love your editor is: I don't have to write code! That is a good thing, because I don't know how to write code. Alas, your advice on fixing the scroll bar issue was more than my tiny bit of html knowledge could handle.

Maybe I should mention that I'm using Freeway Pro (a WYSIWYG site building program) to build my website. I'm putting the Highslide gallery in an html element in the middle of the page, I don't know if that has anything to do with my issue, but I thought best to mention it.

I pasted the dimmer logic code from your example into the html element, in the header, and the gallery displayed all the code as text, just above the thumbnails. I then deleted various parts of the code and tested each time, finally pasting the entire code and placing <script> at the beginning. No more scroll bars! Also, no more page dimming...example here:

http://jimbaileyphoto.com/simptest/

Was there something else I should have done? Did I grab the wrong bit of code? You said grab everything between "Fixed dimmer mod" and "End fixed dimmer mod" and I guess I was looking for the literal words "End fixed dimmer mod". Obviously those words don't occur in the page source.

So, could you please be a bit more explicit about what code I should paste into my header? Pretend that I can barely spell "html" (not far amiss), and talk to me like I'm a 7 year old and I might just grasp it.

Thanks,

JB
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Brilliant! And a couple of questions...

Hi JB,

You have put all of the highslide code in the same place. Some of it should be between the head tags and some of it between the body tags. After clicking the Publish button in the Highslide Editor you get a window with 3 steps. Step 2 tells what to put between the head tags, and step 3 tells what to put between the body tags.

I just downloaded Freeway 5, and there are functions for putting code between the head tags and between the body tags.
Go to Page => HTML Markup ÔÇô you will see this window where you can choose where to put your code:
screenshot_07.jpg
screenshot_07.jpg (100.46 KiB) Viewed 7338 times
This is what you got from the Highslide editor:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Highslide JS - Custom Example</title>

<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />


</head>
<body>
<h3>Gallery</h3>
<div class="highslide-gallery">
<ul>
<li>
<a href="highslide/images/large/graduateschoolofbusiness1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/graduateschoolofbusiness1.jpg" alt=""/>
</a>
<span class="highslide-caption">For Walton College/Graduate School of Business</span>
</li>
<li>
<a href="highslide/images/large/budgetext1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/budgetext1.jpg" alt=""/>
</a>
<span class="highslide-caption">For Budgetext Corporation</span>
</li>
<li>
<a href="highslide/images/large/lily1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/lily1.jpg" alt=""/>
</a>
<span class="highslide-caption">Lily, daughter of Tony and Heather</span>
</li>
<li>
<a href="highslide/images/large/sasha12.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/sasha12.jpg" alt=""/>
</a>
<span class="highslide-caption">Sasha's first day of Kindergarten</span>
</li>
<li>
<a href="highslide/images/large/budgetext3.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/budgetext3.jpg" alt=""/>
</a>
<span class="highslide-caption">For Budgetext Corporation</span>
</li>
<li>
<a href="highslide/images/large/lightening1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/lightening1.jpg" alt=""/>
</a>
<span class="highslide-caption">Light show in Kansas City</span>
</li>
<li>
<a href="highslide/images/large/waltonartscenter1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/waltonartscenter1.jpg" alt=""/>
</a>
<span class="highslide-caption">Walton Arts Center guidebook cover</span>
</li>
<li>
<a href="highslide/images/large/countrycreek1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/countrycreek1.jpg" alt=""/>
</a>
<span class="highslide-caption">For Counrty Creek Farms</span>
</li>
<li>
<a href="highslide/images/large/skinks1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/skinks1.jpg" alt=""/>
</a>
<span class="highslide-caption">A design I made with several images of lizards we hatched</span>
</li>
<li>
<a href="highslide/images/large/fishingspider1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/fishingspider1.jpg" alt=""/>
</a>
<span class="highslide-caption">Dark Fishing spider</span>
</li>
<li>
<a href="highslide/images/large/spinedmicrathena1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/spinedmicrathena1.jpg" alt=""/>
</a>
<span class="highslide-caption">Spined micrathena</span>
</li>
<li>
<a href="highslide/images/large/supercell1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/supercell1.jpg" alt=""/>
</a>
<span class="highslide-caption">Missouri Super-cell</span>
</li>
<li>
<a href="highslide/images/large/washingtonregional2.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/washingtonregional2.jpg" alt=""/>
</a>
<span class="highslide-caption">For Washington Regional</span>
</li>
<li>
<a href="highslide/images/large/washingtonregional1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/washingtonregional1.jpg" alt=""/>
</a>
<span class="highslide-caption">For Washington Regional</span>
</li>
<li>
<a href="highslide/images/large/brownrecluse1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/brownrecluse1.jpg" alt=""/>
</a>
<span class="highslide-caption">Brown Recluse</span>
</li>
</ul>
<div style="clear:both"></div></div>


</body>
</html>
The code marked red should be inserted before the closing head tag ÔÇô choose ÔÇÿInsert: Before </head>ÔÇÖ in the Markup window.
The code marked green should be inserted after the opening body tag ÔÇô choose ÔÇÿInsert: After <body>ÔÇÖ.
The code in black should not be inserted anywhere.

And now we need to add the new dimmer logic:
Go to Page => HTML Markup and choose ÔÇÿInsert: Before </head>ÔÇÖ. You will now see the already inserted highslide stuff.
Paste this code below the existing code:

Code: Select all

<script type="text/javascript">
/*
FIXED DIMMER MOD

Todo in highslide.js:
* Remove all calls to setDimmerSize
* Combine creating style element with existing code
*/

hs.dim = function(exp) {
	function fix(prop) {
		return 'expression( ( ( ignoreMe = document.documentElement.'+ prop +
			' ? document.documentElement.'+ prop +' : document.body.'+ prop +' ) ) + \'px\' );';
	}

	if (!hs.dimmer) {
    	var sel = '.highslide-dimming',
			dec = (hs.ieLt7 || (hs.ie && document.compatMode == 'BackCompat')) ?
				'position: absolute; '+
				'left:'+ fix('scrollLeft') +
				'top:'+ fix('scrollTop') +
				'width:'+ fix('clientWidth') +
				'height:'+ fix('clientHeight') :
				'position: fixed; width: 100%; height: 100%; left: 0; top: 0';


		var style = hs.createElement('style', { type: 'text/css' }, null,
				document.getElementsByTagName('HEAD')[0]);
		if (!hs.ie) {
			style.appendChild(document.createTextNode(sel + " {" + dec + "}"));
		} else {
			var last = document.styleSheets[document.styleSheets.length - 1];
			if (typeof(last.addRule) == "object") last.addRule(sel, dec);
		}

		hs.dimmer = hs.createElement ('div',
			{
				className: 'highslide-dimming',
				owner: '',
				onclick: function() {
					/**/
						hs.close();
				}
			}, {
                visibility: 'visible',
				opacity: 0
			}, hs.container, true);
	}

	hs.dimmer.style.display = '';

	hs.dimmer.owner += '|'+ exp.key;
	if (hs.geckoMac && hs.dimmingGeckoFix)
		hs.setStyles(hs.dimmer, {
			background: 'url('+ hs.graphicsDir + 'geckodimmer.png)',
			opacity: 1
		});
	else
		hs.animate(hs.dimmer, { opacity: exp.dimmingOpacity }, hs.dimmingDuration);
}

hs.undim = function(key) {
	if (!hs.dimmer) return;
	if (typeof key != 'undefined') hs.dimmer.owner = hs.dimmer.owner.replace('|'+ key, '');

	if (
		(typeof key != 'undefined' && hs.dimmer.owner != '')
		|| (hs.upcoming && hs.getParam(hs.upcoming, 'dimmingOpacity'))
	) return;

	if (hs.geckoMac && hs.dimmingGeckoFix) hs.dimmer.style.display = 'none';
	else hs.animate(hs.dimmer, { opacity: 0 }, hs.dimmingDuration, null, function() {
		hs.dimmer.style.display = 'none';
	});
}
hs.setDimmerSize = function() {};
</script>

I just tested this step-by-step in Freeway, so it should work. (You need to remove all highslide stuff in your page before you start all over.)
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
JimB
Posts: 4
Joined: Wed Sep 02, 2009 9:01 pm

Re: Brilliant! And a couple of questions...

Wow, RoadRash, thanks for the very detailed instructions. Very helpful!

Looks like it's fixed, looks and works great in Firefox. Still a little jumpy in Safari, and the scroll-bars flash for a milli-second and then disappear.

I used my own method of incorporation: download the highslide-custom.zip, copy the code in the highslide-custom-example.htm (after inserting the dimmer logic fix) and paste the code into an html element in freeway. Seems to work...

Thanks for your help on this...

JB
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Brilliant! And a couple of questions...

Hi JB,
JimB wrote:I used my own method of incorporation: download the highslide-custom.zip, copy the code in the highslide-custom-example.htm (after inserting the dimmer logic fix) and paste the code into an html element in freeway. Seems to work...
Just remember NOT to paste the code marked black in my previuos post. The code marked black should never be between the body tags in a web page. It can cause trouble in some web browsers.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
JimB
Posts: 4
Joined: Wed Sep 02, 2009 9:01 pm

Re: Brilliant! And a couple of questions...

Ok, I cleaned the code, testing along the way, thanks again for your help!

Question: What determines the order/arrangement of images in the Editor? I would like to rearrange some of my thumbs for better color harmony, can i do this in the editor?

JB
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Brilliant! And a couple of questions...

Custom sorting is not yet supported by the Editor. For now, you have to sort the thumbnails manually in the source code that the Editor generates.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no

Return to “Highslide Editor”