User avatar
swarnendude
Posts: 2
Joined: Wed Dec 30, 2009 8:39 am

How to create Multiple Instances of Highslide

Hi,

I am using highslide gallery and highslide html popups. Now when using both these types of popups, gallery styles are overriding html styles. Following are the style options :

Gallery :

Code: Select all

hs.graphicsDir = 'system/modules/gallery/highslide/graphics/';
hs.outlineType = 'custom';
hs.captionEval = 'this.a.title';
HTML:

Code: Select all

hs.graphicsDir = 'elements/highslide/graphics/';
hs.outlineType = 'glossy-dark';
hs.showCredits = false;
hs.wrapperClassName = 'draggable-header dark';

Now, when gallery part is commented, html part works perfectly. But when both are available, in html popups shows the gallery styles only. How to create multiple instance of highslide with different styles?


Thank you,
Swarnendu
Thanks
Swarnendu
User avatar
swarnendude
Posts: 2
Joined: Wed Dec 30, 2009 8:39 am

Re: How to create Multiple Instances of Highslide

Hi,

I got a solution :

Code: Select all

return hs.htmlExpand(foo, {
				contentId : 'finance-div',
				graphicsDir : 'elements/highslide/graphics/',
				outlineType : 'beveled',				
				wrapperClassName : 'draggable-header dark'
			});
I think I am correct.
Thanks
Swarnendu
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: How to create Multiple Instances of Highslide

Hi Swarnendu,

Yes, you can add some of the settings inline to the onclick, but hs.graphicsDir is a global setting and adding it inline will have no effect.
HereÔÇÖs a simple example page: http://www.roadrash.no/hs-support/gallery+iframe.html
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
roman
Posts: 9
Joined: Sat Jan 02, 2010 7:16 pm

Re: How to create Multiple Instances of Highslide

I have the same problem, and the solution described here doesn't seem to work for me.

I have gallery display (with an unobtrusive option) and an HTML popup on the same page. The HTML popup displays the gallery navigation buttons, which don't belong there, of course, and doesn't display the title bar or the close button.

Here's how I call the HTML popup:

Code: Select all

<a href="url here" onclick="return hs.htmlExpand(this, {contentId: 'citySelectionDialog', outlineType: 'rounded-white', wrapperClassName: 'titlebar', headingText: 'Select city'})" class="highslide">CHANGE CITY</a>
And here's the content:

Code: Select all

<div id="citySelectionDialog" style="display: none;">
		<div class="highslide-maincontent">
			<h3>Lorem ipsum</h3>
			My content here.
		</div>
	</div>
I've tried to do away with div class="highslide-maincontent", but it's even worse (the title overlaps the content).

So, I have more than one problem here. What I am doing incorrectly?
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: How to create Multiple Instances of Highslide

Hi,

Removing controls from HTML popup:
Your gallery must have a slideshowGroup, and that slideshowGroup must be used in the addSlideshow part of the code as in my example page in my previous post.

Titlebar/Close text for HTML popup:
The highslide-maincontent div must be placed directly after the closing a tag, so you need to remove the div with id="citySelectionDialog" around the highslide-maincontent div. You also need to remove contentId: 'citySelectionDialog', from the onclick.

Code: Select all

<a href="url here" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white', wrapperClassName: 'titlebar', headingText: 'Select city' })" class="highslide">CHANGE CITY</a>

          <div class="highslide-maincontent">
             <h3>Lorem ipsum</h3>
             My content here.
          </div>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
roman
Posts: 9
Joined: Sat Jan 02, 2010 7:16 pm

Re: How to create Multiple Instances of Highslide

I see... I think I begin to understand the cause of the problem, but I haven't gotten it completely.

For my galleries, I want to use unobtrusive mode. What is the way to specify that an image belongs to a group?

Regarding HTML popup:
Because I call the popup (the same one) from different places on a page, I cannot have the highslide-maincontent div directly after the closing a tag. I need to be able to place it elsewhere, and for this I have to specify contentId in the call to htmlExpand.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: How to create Multiple Instances of Highslide

See this reference page for using slideshowGroup in unobtrusive mode: http://highslide.com/ref/hs.onSetClickEvent

HTML popup
Use maincontentId instead of contentId:

Code: Select all

<a href="url here" onclick="return hs.htmlExpand(this, { maincontentId: 'citySelectionDialog', outlineType: 'rounded-white', wrapperClassName: 'titlebar', headingText: 'Select city'})" class="highslide">CHANGE CITY</a>
And somewhere else in your page:

Code: Select all

<div id="citySelectionDialog" class="highslide-maincontent">
	<h3>Lorem ipsum</h3>
	My content here.
</div>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
roman
Posts: 9
Joined: Sat Jan 02, 2010 7:16 pm

Re: How to create Multiple Instances of Highslide

I am getting there. Now the only problem seems to be appearance of the gallery navigation bar on the HTML popup. It no longer navigates (I've put the images into a group), but it's still there nevertheless. Here's my JS code:

Code: Select all

	
        hs.showCredits = false;	
	hs.onSetClickEvent = function ( sender, e ) {
	   // set the onclick for the element, output the group name to the caption for debugging
	   e.element.onclick = function () {
	      return hs.expand(this, { slideshowGroup: 'picThumbs'});
	   }
	   // return false to prevent the onclick being set once again
	   return false;
	}

	hs.wrapperClassName = 'highslide-white';
	hs.outlineType = 'rounded-white';
	hs.dimmingOpacity = 0.75;
	hs.align = 'center';
	
	hs.addSlideshow({
		// slideshowGroup: 'group1',
		interval: 3000,
		repeat: false,
		useControls: true,
		fixedControls: true,
		overlayOptions: {
			opacity: .6,
			position: 'top center',
			hideOnMouseOut: true
		}
	});

	// Optional: a crossfade transition looks good with the slideshow
	hs.transitions = ['expand', 'crossfade'];
And here's what I have for the link element:

Code: Select all

onclick="return hs.htmlExpand(this, {maincontentId: 'citySelectionDialog', outlineType: 'rounded-white', wrapperClassName: 'titlebar', headingText: 'Select city'})" class="highslide"
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: How to create Multiple Instances of Highslide

You need to remove the double slash // in front of the slideshowGroup line in this part of the code:

Code: Select all

hs.addSlideshow({
      // slideshowGroup: 'group1',
      interval: 3000,
      repeat: false,
      useControls: true,
      fixedControls: true,
      overlayOptions: {
         opacity: .6,
         position: 'top center',
         hideOnMouseOut: true
      }
   });
The name of the slideshowGroup must correspond with the name of the slideshowGroup you are using for your galleri (picThumbs).

If you have several galleries you can add the names like this:

Code: Select all

hs.addSlideshow({
      slideshowGroup: ['group1', 'group2', 'group3'],
      interval: 3000,
      repeat: false,
      useControls: true,
      fixedControls: true,
      overlayOptions: {
         opacity: .6,
         position: 'top center',
         hideOnMouseOut: true
      }
   });
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
roman
Posts: 9
Joined: Sat Jan 02, 2010 7:16 pm

Re: How to create Multiple Instances of Highslide

You need to remove the double slash // in front of the slideshowGroup
I am confused. I thought that it was hs.onSetClickEvent that was there to associate hs with the gallery. That's what I thought I did with this:

Code: Select all

return hs.expand(this, { slideshowGroup: 'picThumbs'});
The hs.addSlideshow code is there from some example. I thought I needed it. Is this what causes my HTML popup to display the gallery nav bar? (This is my remaining problem at this moment.)

That's one issue.

The other one is what you mentioned at the end. On the page I am working on right now there's only one gallery. Another one will contain many galleries. However, I won't be able use slideshowGroup: ['group1', 'group2', 'group3'] because I won't know names of the groups in advance. They'll be produced dynamically. So, I was going to use

Code: Select all

hs.onSetClickEvent = function ( sender, e ) {
   // set the onclick for the element, output the group name to the caption for debugging
   e.element.onclick = function () {
      return hs.expand(this, { slideshowGroup: this.parentNode.className, 
         captionText: this.parentNode.className });
   }
   // return false to prevent the onclick being set once again
   return false;
}
Note how this code sets the value of slideshowGroup. This will allow my to have groups without hardcoding their names in advance.

Update: slideshowGroup: this.parentNode.className won't help me because the parent element will be a div that will be inside a td that will be inside tr, etc. The unique element will be pretty far from the link element. So, I will have to do something like this:

Code: Select all

this.parentNode.parentNode.parentNode.parentNode.className
. This is ugly and costly to maintain. Can I use jQuery to locate the node and pass it to HS somehow? Probably so -- by storing the class name in a variable and then passing the variable to the expand method.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: How to create Multiple Instances of Highslide

The addSlideshow part of the code is needed for adding the controls to the popups. When the slideshowGroup line is commented out (with double slash in front of the line) the controls is added to all popups ÔÇô both HTML and images. Adding the slideshowGroup name(s) will tie the controls only to the given slideshowGroup(s).
This method will work well when the when the slideshowGroup names are known, but not when using this.parentNode.className. In this case you can remove the controls from the HTML popup by using CSS and wrapperClassName.
Add this CSS to you highslide.css file:

Code: Select all

.no-controls .highslide-controls {
	display: none;
}
And add the new wrapperClassName to the onclick for your HTML popup:

Code: Select all

onclick="return hs.htmlExpand(this, {maincontentId: 'citySelectionDialog', outlineType: 'rounded-white', wrapperClassName: 'titlebar no-controls', headingText: 'Select city'})"
When using CSS/wrapperClass for removing the controls from the HTML popup you donÔÇÖt need to use the slideshowGroup line in the addSlideshow part of the code (leave the line commented out).

Your update question: IÔÇÖm not familiar with jQuery and canÔÇÖt answer that one. I will pass your question to Torstein (admin).
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
roman
Posts: 9
Joined: Sat Jan 02, 2010 7:16 pm

Re: How to create Multiple Instances of Highslide

This has worked. I've added this to my site CSS file:

Code: Select all

.no-controls .highslide-controls {
   display: none;
}
Adding it to highslide.css file will create maintenance issues.

Thank you
verbatimbot
Posts: 4
Joined: Wed Oct 27, 2010 8:11 pm
Location: Belgrade, Serbia

Re: How to create Multiple Instances of Highslide

Hi,
Is there any way of creating another highslide instance and use it in the same scope where 'hs' object lives?

thanks,
Aleksandar

Return to “Highslide JS Usage”