DIYPARTYHIRE
11-11-2010, 11:47 PM
i am going to be using a basic gallery template.
http://www.dhtmlgoodies.com/index.html?whichScript=image_slideshow
There is a list of thumbnails at the bottom which when clicked opens up a large image in the centre of the screen
<div id="dhtmlgoodies_slideshow" align="center">
<div id="previewPane">
<h2>Please click on the large image to open a complete gallery from that event</h2>
<img src="images/image1_big.jpg">
<span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption">This is the caption of image number 1</div>
</div>
<div id="galleryContainer">
<div id="arrow_left"><img src="images/arrow_left.gif"></div>
<div id="arrow_right"><img src="images/arrow_right.gif"></div>
<div id="theImages">
<!-- Thumbnails -->
<a href="#" onclick="showPreview('gallery/latest/maingallery/ettington0310_main_006.png','1');return false"><img src="gallery/latest/maingallery/ettington0310_thumb_006.png" rel="ettington240710.htm"></img></a>
<a href="#" onclick="showPreview('images/image2_big.jpg','2');return false"><img src="images/image2.jpg"></a>
<a href="#" onclick="showPreview('images/image3_big.jpg','3');return false"><img src="images/image3.jpg"></a>
<a href="#" onclick="showPreview('images/image4_big.jpg','4');return false"><img src="images/image4.jpg"></a>
<a href="#" onclick="showPreview('images/image5_big.jpg','5');return false"><img src="images/image5.jpg"></a>
<a href="#" onclick="showPreview('images/image6_big.jpg','6');return false"><img src="images/image6.jpg"></a>
<a href="#" onclick="showPreview('images/image7_big.jpg','7');return false"><img src="images/image7.jpg"></a>
<a href="#" onclick="showPreview('images/image8_big.jpg','8');return false"><img src="images/image8.jpg"></a>
<!-- End thumbnails -->
<!-- Image captions -->
<div class="imageCaption">We provide a standard disco and LED Uplighters for this Wedding Reception at Ettington PArk Hotel. The evening reception was held in the Long Gallery and due to its characteristic features we are able to use the up lighting to enhance them. We position 2 units at each end of the room and then 2 in each of the wndow bays. Not only do you get a stunning effect in the room but if you venture outside you will see the entire room changing colour from the grounds.</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>
<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>
<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>
<!-- End image captions -->
<div id="slideEnd"></div>
</div>
</div>
</div>
This is all working as it should, however i want to be able to then click on the main image in the centre of the screen and that link to another page. Is this possible?
http://greenclaws.co.uk/latestfunc-test.htm
that is the basic look, it still needs some work but i need to get this working first.
Many thanks
http://www.dhtmlgoodies.com/index.html?whichScript=image_slideshow
There is a list of thumbnails at the bottom which when clicked opens up a large image in the centre of the screen
<div id="dhtmlgoodies_slideshow" align="center">
<div id="previewPane">
<h2>Please click on the large image to open a complete gallery from that event</h2>
<img src="images/image1_big.jpg">
<span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption">This is the caption of image number 1</div>
</div>
<div id="galleryContainer">
<div id="arrow_left"><img src="images/arrow_left.gif"></div>
<div id="arrow_right"><img src="images/arrow_right.gif"></div>
<div id="theImages">
<!-- Thumbnails -->
<a href="#" onclick="showPreview('gallery/latest/maingallery/ettington0310_main_006.png','1');return false"><img src="gallery/latest/maingallery/ettington0310_thumb_006.png" rel="ettington240710.htm"></img></a>
<a href="#" onclick="showPreview('images/image2_big.jpg','2');return false"><img src="images/image2.jpg"></a>
<a href="#" onclick="showPreview('images/image3_big.jpg','3');return false"><img src="images/image3.jpg"></a>
<a href="#" onclick="showPreview('images/image4_big.jpg','4');return false"><img src="images/image4.jpg"></a>
<a href="#" onclick="showPreview('images/image5_big.jpg','5');return false"><img src="images/image5.jpg"></a>
<a href="#" onclick="showPreview('images/image6_big.jpg','6');return false"><img src="images/image6.jpg"></a>
<a href="#" onclick="showPreview('images/image7_big.jpg','7');return false"><img src="images/image7.jpg"></a>
<a href="#" onclick="showPreview('images/image8_big.jpg','8');return false"><img src="images/image8.jpg"></a>
<!-- End thumbnails -->
<!-- Image captions -->
<div class="imageCaption">We provide a standard disco and LED Uplighters for this Wedding Reception at Ettington PArk Hotel. The evening reception was held in the Long Gallery and due to its characteristic features we are able to use the up lighting to enhance them. We position 2 units at each end of the room and then 2 in each of the wndow bays. Not only do you get a stunning effect in the room but if you venture outside you will see the entire room changing colour from the grounds.</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>
<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>
<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>
<!-- End image captions -->
<div id="slideEnd"></div>
</div>
</div>
</div>
This is all working as it should, however i want to be able to then click on the main image in the centre of the screen and that link to another page. Is this possible?
http://greenclaws.co.uk/latestfunc-test.htm
that is the basic look, it still needs some work but i need to get this working first.
Many thanks