User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Links on expanded images from galleries

Hello,
I have managed so far to tweak Highslide JS to my own exact needs regarding my website at http://www.alterlittera.com. However, I have been unable to do two things:
1. I can't create custom links to specific web pages from expanded gallery images. I have set up a test page at http://www.alterlittera.com/al_htm/oldtype_new.htm displaying a custom font gallery (slideshow). I would like to be able to open a specific web page when clicking on a specific expanded font poster (i.e., I would like to set up a specific link for every expanded poster, so users are sent to the appropriate font page when they click on the font poster). All I can do so far by clicking on expanded font posters is to display the next poster (the standard Highslide JS behaviour).
2. Additionally, I wonder if I can display the scroll arrows on the thumbstrip past the left and right sides so they don't overlap with the thumbnails (i.e., just as in the case of the arrows in both sides of the expanded image).
By the way, I managed to solve the strange IE scrolling issue related to thumbstrips by using a simple method not mentioned (as far as I've seen) in the forums.
Thanks in advance.
User avatar
EarlyOut
Posts: 1705
Joined: Sun Nov 11, 2007 9:22 pm
Location: Sector R
Contact: Website

Re: Links on expanded images from galleries

Alter Littera wrote:By the way, I managed to solve the strange IE scrolling issue related to thumbstrips by using a simple method not mentioned (as far as I've seen) in the forums.
What IE scrolling issue? And what was your solution?
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Links on expanded images from galleries

This one: http://highslide.com/forum/viewtopic.php?f=1&t=7376
Or this one: http://highslide.com/forum/viewtopic.ph ... 04&p=21457
I couldn't find a solution that worked for me, until I removed every body content appearing after the container of my <div id="gallery-area" ...>. I don't know why, but it seems to work flawlessly. Feel free to have a look at the html code in the oldtype_new.htm file mentioned in my first post.
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Links on expanded images from galleries

I think I've solved the first issue mentioned in my first post (point to http://www.alterlittera.com/al_htm/oldtype_new.htm for an updated live test page). I have six thumbnails identified as alot01 through alot06 (plus several others unidentified for testing purposes). I am now using the following code to open in the same window a specific htm page depending on which expanded image is clicked on:

Code: Select all

	hs.Expander.prototype.onImageClick = function() {
	   if (this.a.id == 'alot01') 
	      return window.location.href = 'oldtype/gutenberg_b.htm';
	   else if (this.a.id == 'alot02') 
	      return window.location.href = 'oldtype/gutenberg_c.htm';
	   else if (this.a.id == 'alot03') 
	      return window.location.href = 'oldtype/psalterium.htm';
	   else if (this.a.id == 'alot04') 
	      return window.location.href = 'oldtype/deutsche_schrift.htm';
	   else if (this.a.id == 'alot05') 
	      return window.location.href = 'oldtype/caslon_gotisch.htm';
	   else if (this.a.id == 'alot06') 
	      return window.location.href = 'oldtype/alter_gotisch.htm';
	   else
	      return false;
I have also tried to assign a specific cursor and a specific title to every expanded image (identified or not) as follows:

Code: Select all

	hs.Expander.prototype.onInit = function() {
	   if (this.a.id == 'alot01' || this.a.id == 'alot02' || this.a.id == 'alot03' || this.a.id == 'alot04' || this.a.id == 'alot05' || this.a.id == 'alot06')
	      {
		  hs.restoreCursor = 'pointer';
		  hs.lang.restoreTitle = 'Available - Click for Details';
		  hs.lang.number = '<em>Oldtype Font No. %1 of %2 - Available</em>';
		  }
	   else
	      {
		  hs.restoreCursor = 'default';
		  hs.lang.restoreTitle = 'Under Development';
		  hs.lang.number = '<em>Oldtype Font No. %1 of %2 - Under Development</em>';
		  }
	};
Everything seems to work fine except for the cursor, which stubbornly remains as a 'pointer' (the usual hand) irrespective of whether it points to a clickable identified image (the first six ones) or not (the remaining ones). I have used for testing purposes my customized highslide.css and highslide-full.js files, as well as the original ones, to the same result. I have also tried with two custom icons instead of 'pointer' and 'default'; it seems to work on FF, but definitely not in IE. Any clue will be very much appreciated.
I have also noticed that after loading the page pointed to by a specific expanded image, and clicking on the browser's back button, FF takes me back to the calling page with the thumbstrip and expanded image as they were left, but IE takes me back to the calling page with the thumbstrip and expanded image restored to the first ones (alot01). I assume this has to do with how each browser manages cached pages as stated in their respective user preferences.
Finally, I have not yet resolved the second issue mentioned in my first post.
Regards.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Links on expanded images from galleries

1) Please see this jsFiddel: http://jsfiddle.net/roadrash/KtDpz/1/
The comments in the javascript frame of the jsFiddle will answer your questions.

2) As far as I know, it isnÔÇÖt possible to push the scroll arrows outside the thumbstrip.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Links on expanded images from galleries

Perfect. Thanks and thanks again. If I can find a way of pushing the scroll arrows outside the thumbstrip (or similar), I will post it here.
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Links on expanded images from galleries

Hello again. I would like to reconsider this annoying IE issue (already mentioned above): After loading the page pointed to by a specific expanded image, clicking on the browser's back button takes me back to the calling page with the thumbstrip and expanded image as they were on exit only in FF; IE takes me back to the calling page with the thumbstrip and expanded image restored to the first ones (alot01). This is an important drawback for a product gallery because customers expect to be taken back to what they were seeing before leaving the calling page, and not neccessarily to the first item on that page. Any suggestion on how to correct/avoid this IE/Highslide issue will be mostly appreciated.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Links on expanded images from galleries

The problem is that IE (and Chrome) reloads the page when you're using the back button. Firefox (and Safari) seems to go back without reloading the page. The gallery will start from the beginning with the first image when the page is reloaded. I donÔÇÖt know why the browsers behave different when clicking the back button, and we donÔÇÖt have any fix for this browser behavior.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Links on expanded images from galleries

Thanks a lot again.
With regard to a possible way of pushing the scroll arrows outside the thumbstrip, I have read some older posts in the forum and I have tried the following (with near success):

Code: Select all

.highslide-thumbstrip {
	margin: 0 36px;
}
.highslide-thumbstrip .highslide-marker {
	margin: 0 36px;
}
Everything seems to work fine except for next image selection and down (right) scrolling. Strangely, previous image selection and up (left) scrolling works fine. The main problem is that the last thumbnail (number 22) is unreachable, as though it "resided" past the right edge of the thumbstrip. You can find an updated live test-page at http://www.alterlittera.com/al_htm/oldtype_new.htm.
Thanks again for your patience and for your superb support.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Links on expanded images from galleries

Alter Littera wrote:The main problem is that the last thumbnail (number 22) is unreachable, as though it "resided" past the right edge of the thumbstrip.
This is the main reason why you canÔÇÖt push the scroll arrows outside the thumbstrip. When adding margins to .highslide-thumbstrip, the thumbstrip will be ÔÇ£clippedÔÇØ with the same amount of pixels as the margins youÔÇÖve added, and the right end of the thumbstrip will be hidden.
The thumbstrip is built using a lot more CSS than what you are seeing in the CSS file; the rest of the CSS is added directly through the script itself.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Links on expanded images from galleries

OK. It was a minor issue (although perhaps you might consider adding such possibility in future releases ...).
Thank you very much for your support.
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Links on expanded images from galleries

Hi there again.
I have solved to a large extent the issue regarding scroll arrows overlaping the thumbnails on horizontal thumbstrips. Basically, I have reduced the size of the scroll arrows and corresponding divs, and displaced them a bit above the thumbstrip. Everything works fine and fits my webpage specifications perfectly. You can have a look at http://www.alterlittera.com/al_htm/oldtype_gallery.htm (which replaces references in previous posts). As a matter of detail, I would like to round this issue by applying a title tag to the small scroll arrows above the thumbstrip (something like 'Scroll Left' and 'Scroll Right' when the cursor hovers on the arrows), just as in the case of the large image arrows. Any suggestion on how to implement those title tags will be mostly appreciated.
Thanks in advance.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Links on expanded images from galleries

To avoid doing changes in the highslide-full.js file you can add the title attributes using jQuery.
Add this after the included highslide-full.js file:

Code: Select all

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
hs.Expander.prototype.onAfterExpand = function() {
	$('.highslide-scroll-up div').attr('title','Scroll Left');
	$('.highslide-scroll-down div').attr('title','Scroll Right');
};
</script>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
Alter Littera
Posts: 29
Joined: Sun Jun 03, 2012 10:30 am
Location: Madrid - Spain
Contact: Website

Re: Links on expanded images from galleries

What about changing the highslide-full.js file? I prefer not to use jQuery, and, in fact, I am already using a customized highslide-full.js file which adds some functionality to the original script (such as resizing expanded images from both bottom-right and top-left corners, and restoring moved/resized expanded images to their original position/size).
Thanks again.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Links on expanded images from galleries

We donÔÇÖt recommend doing changes in the original highslide js files because this will complicate future upgrades of the script. I can see that you are not using the latest version of Highslide, so you should upgrade now before you're losing track of the changes youÔÇÖve done.

Adding the title attributes directly in the js file - find these two lines (line 3198 and 3199 in the original highslide-full.js)

Code: Select all

'<div class="highslide-scroll-up"><div></div></div>'+
'<div class="highslide-scroll-down"><div></div></div>'+
Add the title attributes:

Code: Select all

'<div class="highslide-scroll-up"><div [hilight]title="Scroll Left"[/hilight]></div></div>'+
'<div class="highslide-scroll-down"><div [hilight]title="Scroll Right"[/hilight]></div></div>'+
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no

Return to “Highslide JS Usage”