Highslide
Warning I do not have any relation to the creation of the this JavaScript library. I just integrated it into my components, but to use this library, you must comply with the terms of the license this library. More you can read on the website of the author this JavaScript libraries http://highslide.com/
Just insertion of images in the article.
1
2
3
4
|
<img class="border_tracings" alt="God sees everything!" src="http://sitetranslation.org/images/stories/allimage/god.jpg" width="124" height="124" />
<img class="border_tracings" alt="Admiral" src="http://sitetranslation.org/images/stories/allimage/admiral.jpg" width="124" height="124" />
<img class="border_tracings" alt="Fighters" src="http://sitetranslation.org/images/stories/allimage/stels.jpg" width="124" height="124" />
<img class="border_tracings" alt="Сarrier" src="http://sitetranslation.org/images/stories/allimage/carrier.jpg" width="124" height="124" />
|
The result of inserting images in the article.
Opening image by clicking on the link
1
|
<a href="http://sitetranslation.org/images/stories/allimage/god.jpg" class="highslide" onclick="return hs.expand(this)" >Example</a>
|
Result insert html code - example
Creating inline content with wrapper and headline.
1
2
3
4
5
6
7
|
<a href="" onclick="return hs.htmlExpand(this)">
Open HTML-content
</a>
<div class="highslide-maincontent">
<h3>Lorem ipsum</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
</div>
|
Result insert html code.
Open HTML-content
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
Opens page with using AJAX.
1
2
3
4
|
<a href="http://sitetranslation.org/"
onclick="return hs.htmlExpand(this, { objectType: 'ajax', width: 1050 } )">
click here.
</a>
|
Result insert html code.
AJAX requesting the body of a HTML page, click here.
Opens page with using AJAX with the specified id, which must be obtained.
1
2
3
4
5
|
AJAX requesting a specific id in an external HTML page,
<a onclick="return hs.htmlExpand(this, { objectType: 'ajax'} )" href="http://sitetranslation.org#cntleft">example 1</a>,
<a onclick="return hs.htmlExpand(this, { objectType: 'ajax', width: 700} )" href="http://sitetranslation.org/all-products.html#cntleft">example 2</a>.
|
Result insert html code.
AJAX requesting a specific id in an external HTML page, example 1, example 2
Opening frames
1
2
3
|
<p><a href="http://highslide.com/" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width:1000, height:1000 } )">
Content in iframe
</a></p>
|
Result insert html code.
Content in iframe
Inserting flash in the page
1
2
3
4
5
6
|
<a href="http://www.youtube.com/v/YmbEwSdJg6c" onclick="return hs.htmlExpand(this, { objectType: 'swf', width: 640,
objectWidth: 640, objectHeight: 360, maincontentText: 'You need to upgrade your Flash player',
swfOptions: { version: '7' } } )"
class="highslide">
Display flash
</a>
|
Result insert html code.
Display flash
Link to the official project of this JavaScript libraries http://highslide.com
{ageent}highslide{ageent}
