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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Need a linked text box

    So im trying to get a linked text box in my photogallery.
    I want it linked to each picture so i can put a different description for each one.
    I have not done this kind of coding in a long time, so i don't know if i had to have a
    div tag for each photo or not.

    I was hoping to get the information box under the big picture viewer. Thanks for the help in advance.
    Also, I am not a expert in java, so I dont know if that code is the best I have for my set up or not,
    or if it is a messy code, so sorry about that if that is going to cause issues.

    Here is my coding...
    INDEX code

    Code:
    <html>
    
    <body>
    
     
    <div id="gallery">
        <div id="thumbs">
            <a href="javascript: changeImage(1);"><img src="images/RS1.png" alt="" /></a>
            <a href="javascript: changeImage(2);"><img src="images/RS2.png" alt="" /></a>
            <a href="javascript: changeImage(3);"><img src="images/SW1.png" alt="" /></a>
            
        </div>
     </div>
    </div>
        <div id="bigimages">
            <div id="normal1">
                <img src="images/bigimage1.jpg" alt=""/>
            </div>
     
            <div id="normal2">
                <img src="images/bigimage2.jpg" alt=""/>
            </div>
     
            <div id="normal3">
                <img src="images/bigimage3.jpg" alt=""/>
            </div>
     
            <div id="normal4">
                <img src="images/bigimage4.png" alt=""/>
            </div>
     
            <div id="normal5">
                <img src="images/bigimage5.png" alt=""/>
            </div>
        </div>
    </div>
    
    </body>
    </html>

    Javascript code:

    Code:
    function changeImage(current) {
    	var imagesNumber = 5;
    	
    	for (i=1; i<=imagesNumber; i++) {	
    		if (i == current) {
    			document.getElementById("normal" + current).style.display = "block";
    		} else {
    			document.getElementById("normal" + i).style.display = "none";
    		}
    	}
    }
    and CSS code:

    Code:
    body {
    	margin: 0;
    	padding: 0;
    	background: #222;
    	color: #EEE;
    	text-align: center;
    	font: normal 9pt Verdana;
    }
    a:link, a:visited { 
    	color: #EEE; 
    }
    img {
    	border: none;
    }
    #normal2, #normal3, #normal4, #normal5 {
    	display: none;
    }
    #gallery {
    	margin: 0 auto;
    	width: 800px;
    }
    #thumbs {
    	margin: 10px auto 10px auto;
    	text-align: center;
    	width: 800px;
    }
    #bigimages {
    	width: 770px;
    	float: canter;
    }
    #thumbs img {
    	width: 130px;
    	height: 130px;
    }
    #bigimages img {
    	border: 4px solid #555;
    	margin-top: 5px;
    	width: 750px;
    }
    #thumbs a:link, #thumbs a:visited {
    	width: 130px;
    	height: 130px;
    	border: 6px solid #555;
    	margin: 6px;
    	float: left;
    }
    #thumbs a:hover {
    	border: 6px solid #888;
    }
    Last edited by attackmac; 11-29-2012 at 06:13 PM. Reason: adding more information

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts
    For use of an old (but wonderful) JavaScriptKit slideshow, see http://www.jacquimorgan.com . And as noted see

    /* Flexible Image Slideshow- by JavaScriptKit.com (http://www.javascriptkit.com)
    For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ This notice must stay intact for use */

    /*see forum Flexible image slideshow script help for adding caption/title August08 and onMouseOver PAUSE Aug08*/

    http://www.javascriptkit.com/script/...bleslide.shtml

    In another instance, used innerHTML.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by waxdoc View Post
    For use of an old (but wonderful) JavaScriptKit slideshow, see http://www.jacquimorgan.com . And as noted see

    /* Flexible Image Slideshow- by JavaScriptKit.com (http://www.javascriptkit.com)
    For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ This notice must stay intact for use */

    /*see forum Flexible image slideshow script help for adding caption/title August08 and onMouseOver PAUSE Aug08*/

    http://www.javascriptkit.com/script/...bleslide.shtml

    In another instance, used innerHTML.
    Not quite what I'm looking for. I want to keep the format as I have it, but just add a description box under the main picture viewer

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the helpful links, but that is not quite what I am looking for.
    I need to keep the format the same as I have it. Not a slideshow, I'm
    just looking to put a description box under the main picture viewer. I still
    have not been able to get this working yet. Once again, thanks in advance for all
    the help.

    Mac

    Edit: New question comes to mind... Is this something that can even be done in HTML,
    or is it something that needs to be written in Java or my CSS? Thanks in advance for
    answering my question.
    Last edited by attackmac; 11-30-2012 at 06:53 PM. Reason: adding a question to my post. See "Edit:"

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts
    JavaScript is not JAVA. It would be helpful if you can give online example of your page. Now noting your "thumbnail" code, wonder if subsequent page at http://www.jacquimorgan.com/hist/index.html might be closer to your requirements. The code used is outdated and messy, but basically used innerHTML -- which is not an "elegant" solution. I'm not a JavaScript pro; hopefully one will step forward.

    Code:
    <div id="thumbnails">
    
    <a href="#nogo" onclick="javascript:loadpage('03_CalendarScottPrinting.jpg')" 
    onMouseOver="MGOn('MG1'); document.getElementById('text').innerHTML ='Scott Printing Calendar'" title="Scott Printing Calendar">   
    	<img name="1" alt="Scott Printing calendar" src="03_CalendarScottPrinting.jpg"  title="Scott Printing Calendar" /></a>
    
    <a href="#"  onclick="javascript:loadpage('04_ManGoat.jpg')" 
    onMouseOver="MGOn('MG2'); document.getElementById('text').innerHTML ='American Artist Cover art'" title="American Artist Cover art"> 
    
         <img name="2" alt="American Artist Cover art" src="04_ManGoat.jpg" title="American Artist Cover art" /></a>
    The HTML, as follows, uses the TEXT id referenced in document.getElementById('text').innerHTML ='__'
    Code:
    <div id="space" class="scaler">
    <img src="04_AmericanArtist.jpg" alt="MGholder" id="MGholder" name="MGholder" hspace=0 vspace=0 border=1 class="MGholder" /> 
    <br />
    <p id="text"> American Artist cover</p>
    </div> <!--closeSPACE-->
    Last edited by waxdoc; 11-30-2012 at 11:01 PM. Reason: fix [html]

  • Users who have thanked waxdoc for this post:

    attackmac (12-04-2012)

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here is a screen shot of what is looks like. This is not live on a site yet.

    The thumbnails are clickable, bringing up a large image in the main viewer.

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by waxdoc View Post
    JavaScript is not JAVA. It would be helpful if you can give online example of your page. Now noting your "thumbnail" code, wonder if subsequent page at http://www.jacquimorgan.com/hist/index.html might be closer to your requirements. The code used is outdated and messy, but basically used innerHTML -- which is not an "elegant" solution. I'm not a JavaScript pro; hopefully one will step forward.

    Code:
    <div id="thumbnails">
    
    <a href="#nogo" onclick="javascript:loadpage('03_CalendarScottPrinting.jpg')" 
    onMouseOver="MGOn('MG1'); document.getElementById('text').innerHTML ='Scott Printing Calendar'" title="Scott Printing Calendar">   
    	<img name="1" alt="Scott Printing calendar" src="03_CalendarScottPrinting.jpg"  title="Scott Printing Calendar" /></a>
    
    <a href="#"  onclick="javascript:loadpage('04_ManGoat.jpg')" 
    onMouseOver="MGOn('MG2'); document.getElementById('text').innerHTML ='American Artist Cover art'" title="American Artist Cover art"> 
    
         <img name="2" alt="American Artist Cover art" src="04_ManGoat.jpg" title="American Artist Cover art" /></a>
    The HTML, as follows, uses the TEXT id referenced in document.getElementById('text').innerHTML ='__'
    Code:
    <div id="space" class="scaler">
    <img src="04_AmericanArtist.jpg" alt="MGholder" id="MGholder" name="MGholder" hspace=0 vspace=0 border=1 class="MGholder" /> 
    <br />
    <p id="text"> American Artist cover</p>
    </div> <!--closeSPACE-->
    Do I have to change my other coding to support this code? Reason I ask is because just a copy paste is not working.

  • #8
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok, I got it! Thank you so much for you help waxdoc! When It is up ill post a link


  •  

    Posting Permissions

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