By using our site, you acknowledge that you have read and understand our Cookie Policy , Privacy Policy , and our Terms of Service. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I am displaying images in xtype:dataview as thumbnail. I am curious how to show the tapped image as a Highslide popup in a next view. Can someone guide me in this? A sample code will be much help full.

Author:Voodoozil Meztill
Language:English (Spanish)
Published (Last):1 December 2018
PDF File Size:17.11 Mb
ePub File Size:1.77 Mb
Price:Free* [*Free Regsitration Required]

The basic way to mark up your thumbnail is to put an a -tag around an img -tag. The a -tag has to be supplied by the correct class and onclick attributes like below. In this case the browser points directly to the image if the script fails. If you are using galleries, Highslide uses the onclick attribute to index the thumbnails, so it is important that the onclick attrubute is written out in plain text and not defined in an event handler elswhere on the page.

You may want to create a html page to show if the script fails in old browsers or if the user has disabled JavaScript. This is a good idea for database powered sites, where you can display the caption text in the fallback page. To achieve this you supply the function call of the onclick -attribute with a second parameter where you specify a hs. Read more about these parameters under Three levels of customizing below. In this case you can add extra options using the hs.

Some settings can be overridden inline for each image in your web page. This applies to the settings listed under hs. Supply the settings as an object literal in the second parameter of the hs. If you prefer dropping the onclick attribute and separate your content from behaviour, see hs.

For advanced users: you can create custom properties to send to the hs. Expander object. The properties are supplied in the third parameter of the hs. For example, you can provide an url to use within HsExpander:.

The custom variable can then be accessed within the hs. Expander object through the this. This example shows how you can override click action in the hs. In 3 above you define the individual configuration object directly in the second parameter of hs.

In some cases you want a group of images to have the same options, but not all. So you can't specify the options globally, and specifying the same config over again for each of the group's thumbnails causes repetetive code like this:. This code is inefficient and often harder to maintain. If you want change an option for all the items in the group, you have to change it for each single one. A better option is to create a named variable for the configuration object and define it in the top of your web page or in highslide.

This is how it is done in some of the provided examples as well as in the code generated by the Editor. You can also set hs. By default the expanded content appears centered above the opening anchor if the viewport allows it.

If the popup bumbps into one of the sides of the viewport, it will move so that all of the content is visible. The position can be controled in detail by using one of the methods below. These require that you use the highslide-full. Next, you have to tie the overlay to one or more thumbnails. In the head section of the HTML page, after the highslide. The function takes an array object as the first parameter. See hs. When you want to add individual overlays for each expander, hs.

Or you can use the hs. You control the size of the expander by setting CSS width and height on the content div. By setting none at all the expander is behaving like a normal div, and takes the entire viewport width if the content wants it. By setting width and not height, the expander takes the height it needs within the viewport.

For more detailed control on each single expander, use hs. These properties override those set using CSS on the content div. When you use self rendering content wrappers, this is generally an easier way than using separate hs. The size is also affected by hs. Since version 3. The main content is then either grabbed from Ajax, Iframe, Flash or the maincontent keyword.

This wrapper is meant to be heavily styled using CSS, and you can use styling for example to remove elements you don't want. The language strings can be localized through the hs. The HTML structure of the self rendered content looks like the following. The included content is injected into the highslide-body. This is an example of how to style the self-rendered content. This example defines the looks of a wrapper using the default wrapperClassName, "highslide-wrapper".

To create groups or individual popups with different styling, apply a hs. If you prefer separating your content from behaviour, download highslide. Then mark up your anchor like this:. To gain full control of the content wrapper, extending what you can do with CSS, you make an invisible div somewhere in your page. Then within the content div somewhere you put another div with class name "highslide-body".

This is where the AJAX content is put dynamically. As with AJAX content , hs. Since Highslide version 4. The first requirement is that you include swfobject. Like with iframes and Ajax, the URL of the included file goes in the href attribute of the opening anchor, or in the hs. Then you use hs. For extended functionality like sending variables to the Flash movie, see hs.

Like with AJAX and iframes, the Flash content is injected into a self rendering wrapper or a wrapper generated using hs. Another thing with Flash content is that it looks bad when the size of the expander is reduced to fit the viewport. So you want to set hs. Also note that a bug in Firefox and Camino for Mac requires that if you use a dimming page background, you set hs.

Search the Highslide website. Testimonials This is the single best usability improvement I've seen in image viewing since the digital age. For instance, the company [XXX] just bought [YYY], for all the whiz-bang, simply cannot in my opinion rival the elegant and beautiful, yet powerful simplicity of your creation.

I congratulate and thank you sincerely. It is an added bonus that you have made your creation available under such a non-restrictive licence. I hope your usability talent is well-appreciated.

Janos, Budapest. Gary, UK. Again, I am truly appreciative and impressed by your quality of product, level of support, technical abilities, and willingness to help. It is for all these reasons that I am enamored by your product and customer support. It is also for these reasons that I am purchasing a license for your software. Sean Dempsey. We've been looking at a way to enhance our ecommerce and photography software for some time, and were lucky enough to stumble upon Highslide JS.

Integration was incredibly straight forward, the documentation and examples meant that we could very quickly decide on the best way forward for our own application, and within an hour we had rewritten our own software to include the Highslide JS functionality as standard.

We've tested it on several browsers across several platforms and it works perfectly so far, with no hanging around waiting for java applets to install or inconvenient cabfile installations.

We would have no hesitation whatsoever in recommending Highslide to anyone who is considering taking a huge leap forward with their image galleries. Excellent work Torstein, thank you! First of all: this is one of the best javascripts I've ever encountered. Very useful, customizable and rock solid. You are doing a fantastic job, Torstein. And that's not all What a saint. Highslide JS Gallery is a unique way of modern presentation of any kind of products' pictures.

It allows the whole content of web site to be more attractive and user friendly. Highslide JS is incomparably better alternative to other well known and rather common lightbox scripts. We recommend Highslide JS for anyone who wants to shine! The Highslide Editor is freaking outrageous.

Just plain awesome. THE best editor for js libraries I've ever seen and used. Beats everything.


Subscribe to RSS

Do you like Highslide? First, you need to download Highslide and install it on your SharePoint. If you are working in a Master Page, just insert the code in the page header. Then, you will add some JavaScript configuration code. You can find many examples on the Highslide site, but here is what I use. Of course, make sure to change graphicsDir to point to the location where you installed Highslide!


Highslide JS

Use the visual Highslide Editor to set up your Highslide installation without writing code. These are some third party sites offering plugins and other implementations of Highslide into other systems. If you know a plugin that's not in the list, please send me an email through the "Contact" link in the main menu. Some of these implementations use old versions of Highslide, so you should upgrade to the latest version before you use them in a production environment.

Related Articles