Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Displaying text, html links, and images

    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 http://www.cryer.co.uk/resources/jav...13_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.
    Last edited by javanite; 07-29-2008 at 11:31 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's one possibility

    Code:
    <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>
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •