Eksemblerne på denne side er alle nogen du kan bruge hvis du har lyst
Caption på popup billede
 
Koden du skal bruge..
Marker alt i det hvide område og vælg kopier. Derefter i din artikel  i JCE kode mode brug ctrl og v til indsæt.
 Href="sti" skal erstattes med stien til dit eget billede til popup
img src="/sti" skal erstattes med dit eget foto til thumpnail
captionText:'tekst' skal erstates med din egen tekst
with="150" er bredten på thumpnail i pixel
 
 
 
<a class="highslide" href="/images/artikler_highslide/popup_style/j03.jpg" onclick="return hs.expand(this,
{ captionText: 'Kamera: Nikon D7200 Objektiv: Tamron 90 mm macro f/4 Iso 100 eksponering 1/640' } )">
<img src="/images/artikler_highslide/popup_style/j03_th.jpg" alt="" width="150" /> </a>
 
 Caption til højre på popup billede
Marker alt i det hvide område og vælg kopier. Derefter i din artikel  i JCE kode mode brug ctrl og v til indsæt.
Ændre teksten her ved hsjcaption:'ny tekst her' Husk nye stier til dit foto
 
<a href="/images/foto_til_hjemmeside/bygninger/a10.jpg" class="highslide" onclick="return hs.expand(this,
{wrapperClassName: 'wide-border', captionId: 'myid3',
hsjcaption: 'Caption on the right You can open more than one image at a time, and arrange them on your screen by dragging them around.
The captions can be positioned anywhere relative to the image.', captionOverlay: { fade: 0, position: 'rightpanel' }})">
<img src="/images/foto_til_hjemmeside/bygninger/a10.jpg" alt="Highslide JS" title="Click to enlarge" style="display: block;
margin-left: auto; margin-right: auto;" width="140" /></a><
 
 
Koden til overnævnte. Teksten ligger i en html fil som hentes til popup. Skriv og navngiv en html fil og indsæt stien
<div class="textwrapper"><a href="/images/highslide_5/images/include-short.htm" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white',
wrapperClassName: 'draggable-header', objectType: 'ajax' } )" class="highslide"> AJAX content </a></div>
 
 Koden til overnævnte. Teksten ligger i en html fil som hentes til popup. Skriv og navngiv en html fil og indsæt stien
<div class="textwrapper"><a href="/images/highslide_5/images/include-short.htm" onclick="return hs.htmlExpand(this, { outlineType: 'rounded-white',
wrapperClassName: 'draggable-header', objectType: 'iframe' } )" class="highslide"> Iframe content </a></div>

 

 

 

Highslide_eksempler

-

 
Funktion
og
type
Eksempel Kode Forklaring  
 

Almindelig popup

hsexpander

Thumbnail image

(<a href="images/foto_til_hjemmeside/basun/j02.jpg" class="highslide" onclick="return hs.expand(this)">

<img src="/images/foto_til_hjemmeside/basun/j02.jpg" alt="Thumbnail image" width="140" /></a>
           ) Uden klammer

Udskift den røde sti med stien til dit eget foto. Indsæt derefter koden hvor du vil have popup billedet  til at være.                           
 

 Popup med caaption

hsexpander

Thumbnail image

 (   <a href="/images/foto_til_hjemmeside/basun/j03.jpg" class="highslide" title="Klik her." onclick="return hs.expand

(this,{captionId: 'myid', hsjcaption: 'Dette viser en popup med Caption.'})"><img src="/images/foto_til_hjemmeside/basun/j03.jpg"

alt="Thumbnail image" width="140" /></a>)         

   
 

Css til at style borden og lukke ikonet

hsexpander

Highslide JS

 (<a href="/images/foto_til_hjemmeside/basun/j10.jpg" class="highslide" onclick="return hs.expand(this,{outlineType: 'drop-shadow', wrapperClassName: 'highslide-no-border', captionId: 'image3-caption', hsjcaption: 'You can add a caption below the expanded image. Use CSS to style the borders and captions. This image has no borders except <code>bottom-border: 1px solid white</code> at the image and the caption.', hsjcustomOverlay: '<div class="closebutton" onclick="return hs.close(this)" title="{hs.lang.closeTitle}"></div>', overlayId: 'closebutton-overlay', customOverlay: { fade: 0, position: 'top right' }})"><img src="/images/foto_til_hjemmeside/basun/j10.jpg" alt="Highslide JS" width="140" id="thumb3" title="Click to enlarge" border="0"/></a> </td>)                                                                                                                                                              

Grøn tekst kan udskiftes efter behov.
Det er kun tekst og ikke kode.
 
 

Blilledet udvider sig i forhold til ikonet

hsexpander

Highslide JS (<a href="/images/foto_til_hjemmeside/basun/j14.jpg" class="highslide" onclick="return hs.expand(this,{wrapperClassName: 'highslide-blur-example', captionId: 'image4-caption', hsjcaption: 'You can open more than one image at a time, and arrange them on your screen by dragging them around. There are also specific CSS-classes for a blurred image. Notice how these borders change color when you open another image.'})"><img src="/images/foto_til_hjemmeside/basun/j14.jpg" alt="Highslide JS" width="140" title="Click to enlarge" border="0" /></a>)    
 

 

hsexpander 

Highslide JS
 
 <div class="thumbwrapper">
                    <a href="/images/foto_til_hjemmeside/bygninger/a10.jpg" class="highslide" onclick="return hs.expand(this,{wrapperClassName: 'wide-border', captionId: 'myid3', hsjcaption: 'Caption on the right
You can open more than one image at a time, and arrange them on your screen by dragging them around. The captions can be positioned anywhere relative to the image.', captionOverlay: { fade: 0, position: 'rightpanel' }})"> <img src="images/foto_til_hjemmeside/bygninger/a10.jpg" alt="Highslide JS" width="140" title="Click to enlarge" /> </a>
                    <div class="highslide-caption" style="padding: 0 10px 10px 0;"> </div>
                </div>
   
 

 

 

hsexpander 

Highslide JS  (<a href="/images/artikler_highslide/stories/highslide-images/full5.jpg" class="highslide" onclick="return hs.expand(this,{align: 'center', outlineType: null, wrapperClassName: 'highslide-black-border', captionId: 'image5-caption', hsjcaption: 'The images by default try to expand equally in all directions from the thumbnails, but you can also position them in the center like this case. Or you can for instance specify a 200px left margin to keep your menu visible, or anchor the image to one corner of the thumbnail.'})"><img src="/images/stories/highslide-images/thumb5.jpg" alt="Highslide JS" title="Click to enlarge" style="margin-top: 10px;" height="111" border="0" width="120" /></a>)    
 

Html i Caption under billedet. Navigations linje. Kan bruges med flere billeder i et galleri mode.

 hsexpander

Highslide JS  (<a href="/images/artikler_highslide/stories/highslide-images/full6.jpg" class="highslide" onclick="return hs.expand(this,{outlineType: 'rounded-white', wrapperClassName: 'highslide-white', dimmingOpacity: 0.4, captionId: 'image6-caption', hsjcaption: '<div style="height: 34px;">
<a href="#" onclick="return hs.previous(this)" class="control" style="float: left; display: block;" >{hs.lang.previousText} <br><small style="font-weight: normal; text-transform: none;" >{hs.lang.previousTitle}</small></a>
<a href="#" onclick="return hs.next(this)" class="control" style="float: left; display: block; text-align: right; margin-left: 50px;" >{hs.lang.nextText}<br><small style="font-weight: normal; text-transform: none;" >{hs.lang.nextTitle}</small> </a>
<a href="#" onclick="return hs.close(this)" class="control">{hs.lang.closeText}</a>
<a href="#" onclick="return false" class="highslide-move control">{hs.lang.moveText}</a>
</div>'})"><img src="/images/stories/highslide-images/thumb6.jpg" alt="Highslide JS" title="Click to enlarge" style="margin-top: 20px;" height="67" border="0" width="100" /></a>)
   
 

Foto i galleri med antal i capsion

hsexpander

Highslide JS  (<a href="/images/stories/highslide-images/gallery3.jpg" title="Caption for the first image." class="highslide" onclick="return hs.expand(this,{align: 'center', numberPosition: 'caption', outlineType: null, wrapperClassName: 'borderless floating-caption', slideshowGroup: 'gallery1', dimmingOpacity: .8, transitions: [ 'expand', 'crossfade' ]})"><img src="/images/stories/highslide-images/gallery3.thumb.jpg" alt="Highslide JS" title="Click to enlarge" border="0" /></a>)    
 

 

hsexpander 

Highslide JS  (<a href="/images/artikler_highslide/stories/highslide-images/gallery7.jpg" title="Caption for the second image." class="highslide" onclick="return hs.expand(this,{align: 'center', numberPosition: 'caption', outlineType: null, wrapperClassName: 'borderless floating-caption', slideshowGroup: 'gallery1', dimmingOpacity: .8, transitions: [ 'expand', 'crossfade' ]})"><img src="/images/stories/highslide-images/gallery7.thumb.jpg" alt="Highslide JS" title="Click to enlarge" border="0" /></a>)    
  hsexpander  Highslide JS  (<a href="/images/artikler_highslide/stories/highslide-images/gallery5.jpg" title="Caption for the third image." class="highslide" onclick="return hs.expand(this,{align: 'center', numberPosition: 'caption', outlineType: null, wrapperClassName: 'borderless floating-caption', slideshowGroup: 'gallery1', dimmingOpacity: .8, transitions: [ 'expand', 'crossfade' ]})"><img src="/images/stories/highslide-images/gallery5.thumb.jpg" alt="Highslide JS" title="Click to enlarge" border="0" /></a>)    
 

 

hshtmlexpander

HTML Content

 (<div class="textwrapper">
<div style="padding: 2px; height: 20px;">
<a href="#" onclick="return hs.close(this)" class="control">{hs.lang.closeText}</a>
<a href="#" onclick="return false" class="highslide-move control">{hs.lang.moveText}</a>
</div>
<div class="highslide-body" style="padding: 0pt 10px 10px;" >
<h3>Full HTML content</h3>
</div>
<div class="highslide-body" style="padding: 0pt 10px 10px;" >This example uses the <code>htmlExpand</code> method to display full HTML content in the expander. The width of the expanding <code>div</code> is set to <code>300px</code>, while the height is omitted to allow Highslide to decide the best fit.<br><br>In the expander you can put all kinds of content, for instance form elements.</div>
</div>)
   
       hshtmlexpander

crolling HTML Content

(<h3><a href="/images/artikler_highslide/stories/highslide-demo/Included_content.htm" class="highslide" onclick="return hs.htmlExpand(this,{outlineType: 'rounded-white', contentId: 'html-id-2', hsjcontent: '<div style="border-bottom: 1px solid silver; padding: 5px; height: 20px;">
<a href="#" onclick="return hs.close(this)" class="control">{hs.lang.closeText}</a>
<a href="#" onclick="return false" class="highslide-move control">{hs.lang.moveText}</a>
</div>
<div class="highslide-body" style="padding: 10px;"></div>
<div style="border-top: 1px solid silver; text-align: center;" ><small>Powered by <i>Highslide JS</i></small>
</div>', hsjcontentstyle: 'padding: 15px; width: auto;', objectType: 'ajax', cacheAjax: false})">Scrolling HTML Content</a></h3>) 
  hshtmlexpander 

AJAX Content

 
 
 (<td style="vertical-align: top; text-align: center; height: 100px;">
                <h3><a href="/images/stories/templates/nested2.htm#intro" class="highslide" onclick="return hs.htmlExpand(this,{align: 'auto', anchor: 'auto', easing: 'easeInQuad', easingClose: 'easeInQuad', fadeInOut: false, outlineWhileAnimating: true, outlineType: 'rounded-white', wrapperClassName: 'highslide-white', hsjcontent: '%0A', width: 300, objectType: 'ajax'})">AJAX Content</a></h3>
                <div id="highslide-html-ajax" class="highslide-html-content" style="width: 300px;">)
   
   hshtmlexpander

Dynamic AJAX Content

 
 
 (<h3><a href="/images/artikler_highslide/stories/highslide-demo/ajax.htm#dynamic" class="highslide" onclick="return hs.htmlExpand(this,{align: 'auto', anchor: 'auto', easing: 'easeInQuad', easingClose: 'easeInQuad', fadeInOut: false, outlineWhileAnimating: true, outlineType: 'rounded-white', wrapperClassName: 'highslide-white', hsjcontentstyle: 'width: 400px;', objectType: 'ajax', preserveContent: true, overlayId: 'my-overlaytext', customOverlay: { useOnHtml: true, position: 'top right', opacity: 1 }})">Dynamic AJAX Content</a></h3>
                                        <div class="highslide-html-content" id="html-highslide-ajax1" style="width: 400px;">
                                            <div style="height: 18px;"> </div>
                                            <div class="highslide-body" style="padding: 0px 10px 10px;"> </div>
                                        </div>)
   
  hshtmlexpander 

Content in iframe

 (<h3><a href="/images/artikler_highslide/stories/highslide-demo/iframe.htm" class="highslide" onclick="return hs.htmlExpand(this,{contentId: 'html-id-3', hsjcontent: '<div class="html-header" style="border: 0pt none ;">
<a href="#" onclick="return hs.close(this)" class="control">{hs.lang.closeText}</a>
<a href="#" onclick="return false" class="highslide-move control">{hs.lang.moveText}</a>
</div>
<div class="highslide-body"></div>
<div style="border-top: 1px solid silver; padding: 5px 0pt; text-align: center;"><small>Powered by <i>Highslide JS</i> </small></div>', hsjcontentstyle: 'padding: 0px; width: 700px;', objectType: 'iframe', objectWidth: 700, objectHeight: 900, objectLoadTime: 'after'})">Content in iframe</a></h3>)
   
  hshtmlexpander

Display flash

 (<h3><a href="/images/artikler_highslide/stories/flash.swf" class="highslide" onclick="return hs.htmlExpand(this,{allowSizeReduction: false, outlineType: 'rounded-white', contentId: 'html-flash-01', hsjcontent: <div style="padding: 2px; height: 20px;">
<a href="#" onclick="return hs.close(this)" class="control" title="{hs.lang.closeTitle}">{hs.lang.closeText}</a>
<a href="#" onclick="return false" class="highslide-move control" title="{hs.lang.moveTitle}">{hs.lang.moveText}</a>
</div>
<div class="highslide-body">This is replaced by the Flash content. Place your alternate content here and users without the Flash plugin will see this.</div>', hsjcontentstyle: 'width: 300px;', objectType: 'swf', objectWidth: 300, objectHeight: 250, preserveContent: false})">Display flash</a></h3>)
   
  hshtmlexpander 

Iframe with form

<div class="textwrapper"><a href="/images/html_doc/form.htm" id="formexample" class="highslide" onclick="return hs.htmlExpand(this,{outlineWhileAnimating: true, outlineType: 'rounded-white', wrapperClassName: 'highslide-wrapper drag-header', width: 250, objectType: 'iframe', preserveContent: false})">Iframe with form</a></div>     
  hshtmlexpander 

YouTube w/fade effect

<div class="textwrapper"><a href="/http://www.youtube.com/v/znb6_J8npxM&hl=nb_NO&fs=1&amp;" class="highslide" onclick="return hs.htmlExpand(this,{objectType: 'swf', objectWidth: 500, objectHeight: 500})"> YouTube w/fade effect </a></div>