Jump to content
Sign in to follow this  
shah100

display kan gambar

Recommended Posts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS</title>

<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = 'highslide/graphics/';
</script>

<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'glossy-dark';
hs.wrapperClassName = 'dark';
hs.captionEval = 'this.a.title';
hs.numberPosition = 'caption';
hs.useBox = true;
hs.width = 600;
hs.height = 400;
//hs.dimmingOpacity = 0.8;

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
position: 'bottom center',
opacity: .75,
hideOnMouseOut: true
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander'
}
});

// Make all images animate to the one visible thumbnail
var miniGalleryOptions1 = {
thumbnailId: 'thumb1'
}
</script>


</head>

<body>

<!--
3) Put the thumbnails inside a div for styling
-->

<div class="highslide-gallery">
<!--
4) This is how you mark up the thumbnail images with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image. Given the captionEval
option is set to 'this.a.title', the caption is grabbed from the title attribute of
the anchor.
-->

<a class='highslide' id="thumb1" href= 'images/thumbstrip11.jpg' title="Two cabins"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src= 'images/thumbstrip11.thumb.png' alt=''/></a>

<div class="hidden-container">

<a class='highslide' href='images/thumbstrip12.jpg' title="Patterns in the snow"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip12.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip13.jpg' title="Cabins"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip13.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip14.jpg' title="Old stone cabins"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip14.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip15.jpg' title="A litte open water"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip15.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip16.jpg' title="Dipper"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip16.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip17.jpg' title="Dipper"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip17.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip18.jpg' title="Mountains"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip18.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip19.jpg' title="Birch trees"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip19.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip20.jpg' title="Highland woods"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip20.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip21.jpg' title="Frozen lake"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip21.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip22.jpg' title="Spring in the mountains"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip22.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip23.jpg' title="Spring in the mountains"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='images/thumbstrip23.thumb.png' alt=''/></a>

<a class='highslide' href='images/thumbstrip24.jpg' title="Fjord landscape"
onclick="return hs.expand(this, miniGalleryOptions1)">
<img src= 'images/thumbstrip24.thumb.png' alt=''/></a>

</div>
</div>
</body>
</html>
aku refer yg ongbok bagi tu..

Share this post


Link to post
Share on other sites
ok..ko download skrip nie. scan dulu mana tau ada virus.
aku tak scan lagi.

http://komputermalaysia.com/download/imageshow.zip

dalam tu ada 3 folder. buka folder html untuk lihat contoh.
run fail index.html untuk tengok demo.

Cara nak pinda.
buka folder image, ko tengok dalam tu ada beberapa fail gambar.
delete suma fail tu dan ganti dengan yang ko punyai. aku bagi contoh;

file1.jpg (500x375)
file1-thumb.jpg (72x50)

file2.jpg (500x400)
file2-thumb.jpg (72x52)

dan begitulah seterusnya.

Lepas tu buka folder html.
edit fail index.html

cari nama dan lokasi image, tukar supaya sesuai dengan ko punye.
ko boleh tambah tag atau buang tag yang tak perlu.
save fail index.html

test dulu sebelum upload. ko kena upload semua sekali 3 folder tadi.

itu saja.
ok.

Share this post


Link to post
Share on other sites
mak oii abg shah pakai ler
Code:
ler letak code tuh..hihihihihi...errmmm tak sempat nak cuba lagi tapi aku rasa ongbok bagi tuh ok laa...try dulu ler..ym ngan ongbok senang skit...hihihihihi

Share this post


Link to post
Share on other sites
ongbok...napa kalau buka fail index lam kau bagi tu jadi..tapi bila masukan lam frame yg aku wat tu bila priviu kotak2 kecik tu tak kuar..kena klik kotak besar tu baru kotak kecik kuar

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...