...

View Full Version : Displaying text, html links, and images



javanite
07-29-2008, 06:21 PM
Hello Everyone,
I am having problems trying to display HTML links and text together in a javascript photogallery. The following Javascript is taken from the website www.cryer.co.uk/resources/javascript/script13_gallery.htm. It allows you to display images and text when thumbnail buttons are selected. It displays either html links and images, or images and text, when thumbnail buttons are selected. However, it does not display images, links, and text at the same time.

<script type="text/javascript">
// Script copyright (C) 2004 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
function LoadGallery(pictureName,imageFile,titleCaption,captionText)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = imageFile;
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
}
</script>

//put this in the body section
//(thumbnail 1)
<div style="position:absolute;top:50px">
<a href="#_self" onclick="LoadGallery('Gallery','Image1.jpg','GalleryCaption','First sentence ')"><img alt="" src="Image1.jpg" width="50" height="50"></a>
</div>

// (thumbnail 2)
<div style="position:absolute;top:110px">
<a href="#_self" onclick="LoadGallery('Gallery','Image2.jpg','GalleryCaption','Second sentence')"><img alt="" src="Image2.jpg" width="50" height="50"></a>
</div>

//Image Holder
<div style="position:absolute;top:200px">
<img style="position:absolute;border: 1px black solid; color:black; top:100px" alt="Photo gallery" src="Image1.jpg" id="Gallery" width="201" height="201">
<div id="GalleryCaption" >
My first sentence
<div>
</div>


The image holder above displays the image file Image1.jpg and the text "First sentence", when the page loads. When you click on the second
thumbnail, the image holder displays the image file Image2.jpg and the text "Second sentence". I have tried to display html links, images, and text by doing the following but it does not work.



// (thumbnail 2)
<div style="position:absolute;top:110px">
<a href="#_self" onclick="LoadGallery('Gallery','Image.jpg','GalleryCaption','First sentence','<a href=\'LINK.html)\'>LINK</a>')"><img alt="" src="Image2.jpg"

width="50" height="50"></a>
</div>

Please help me solve this problem, any suggestions will be greatly appreciated. Thank you in advance for your help.

Mr J
07-29-2008, 10:49 PM
Here's one possibility


<script type="text/javascript">
// Script copyright (C) 2004 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.
function LoadGallery(pictureName,imageFile,titleCaption,captionText,lnk,lnktxt){
var picture = document.getElementById(pictureName);

if(picture.filters){
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}

picture.src = imageFile;
if (picture.filters){
picture.filters.blendTrans.Play();
}

document.getElementById(titleCaption).innerHTML=captionText;

if(lnk!=""&& typeof lnk!="undefined"){
domBreak=document.getElementById("GalleryCaption").appendChild(document.createElement("BR"))
domLink=document.createElement("A")
domLink.setAttribute("href",lnk)
domLinkText=document.createTextNode(lnktxt)
domLink.appendChild(domLinkText)
document.getElementById("GalleryCaption").appendChild(domLink)
}

}
</script>

<div style="position:absolute;top:50px">
<a href="#_self" onclick="LoadGallery('Gallery','Image1.jpg','GalleryCaption','First sentence','page1.htm','This is a link')"><img alt="" src="Image1.jpg" width="50" height="50"></a>
</div>

<div style="position:absolute;top:110px">
<a href="#_self" onclick="LoadGallery('Gallery','Image2.jpg','GalleryCaption','Second sentence','page2.htm','Link 2')"><img alt="" src="Image2.jpg" width="50" height="50"></a>
</div>

<div style="position:absolute;top:200px">
<img style="position:absolute;border: 1px black solid; color:black; top:100px" alt="Photo gallery" src="Image1.jpg" id="Gallery" width="201" height="201">
<div id="GalleryCaption" >
My first sentence
<div>
</div>

javanite
07-29-2008, 11:44 PM
Hi MR J.
Thank you so much for your help. Your solution works great, however I don't understand what you did to make it work. I was able to get it to work also by tinkering with the thumbnail like the following:

<a href="#_self" onclick="LoadGallery('Gallery','Image.jpg','GalleryCaption','First sentence <br><a href=\'LINK.html)\'>LINK</a>')"><img alt="" src="Image2.jpg"
width="50" height="50"></a>.

Thank you so much for your help I will look at the solution that you came up with and try to understand how it works.

Mr J
07-30-2008, 09:54 PM
The code I added uses the DOM method of dynamically adding an element, in this case a link.

It is a better and more acceptable method than putting the code into the thumbnail



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum