SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    May 2005
    Location
    Suwanee GA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    imageswap-text file swap

    I have a thumbnail image that swaps a large image. I want to swap the text on the page with the text in a corresponding txt file. The text I want to swap is defined by a named/id'd Div. I know there must be some sort of include reference but I can't quite get there. I can mingle PHP and JS if necessary.


    <div class="righttext1">
    sometext to be swapped when a thumbnail is clicked. this line will be filled with the contents from the img#.txt file.
    </div>

    <a href=#
    onclick="swapout('img1', 'othervars....')"> //triggers js for img1 and other variables.
    <img src="thumbs/img1.jpg" /></a>

  2. #2
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    my seggestion is to make a javascript file using php (or whatever) and link to it like this:

    <script type="text/javascript" src="pathtojsinphp.php?possableattribute=0"></script>

    then have the php file do:

    header("content-type: text/javascript");

    then have it output something like:

    aryImages[0]['text'] = 'some text';
    aryImages[0]['location'] = 'somelocation.jpg';
    aryImages[1]['text'] = 'somemore text';
    exc...

    then have it get those values in another javascript.

    -ALL
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can use PHP's file_get_contents(). Put it into a JS string and then use that to swap them:
    PHP Code:
    <?php $txtfile file_get_contents('file.txt'); ?>
    <script type="text/javascript">
    var txt = '<?php echo $txtfile?>';
    window.onload = function () {
      document.getElementById('img1').onclick = function () {
        document.getElementById('righttext1').childNodes[0] = txt;
      }
    </script>
    }
    You might have to escape single quotes in your text file, which you could do with a string replacement function in PHP.

  4. #4
    SitePoint Zealot
    Join Date
    May 2005
    Location
    Suwanee GA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem I am having is that the thumbnails are constantly changing.
    I have thumbnails on left that change thumbnails on the right.
    img1 loads img1_alt1, img1_alt2, etc.....
    I need to be able to change the text based on the click of img1 or img1_alt1.
    Think of img1_alt1 as a product recommendation "you may also like..."

    I decided to load the text into the JS page instead of the text files.
    I am trying to use the title for the thumbnail to call the appropriate text.
    title DNP001 calls var DNP001 text.
    I can display the title(DNP001) but can not pull the text from the DNP001 variable.

    Here is what I have so far.

    // JavaScript Document
    // IMAGE TEXT
    var DNP000= "default text";
    var DNP001="This is DNP001 text";
    var DNP002="This is DNP002 text";
    etc....

    // FUNCTIONS
    //---- This swaps all images on the right (swapImages(DNP000, DNP001, etc...)
    // this works fine
    //
    function swapImages(largeimg, addl1, addl2, addl3, also1, also2, also3, txt){
    document.largeimg.src='images/collections/'+largeimg+'.jpg';
    document.addl1.src='images/thumbs/'+addl1+'.jpg';
    ...
    //image title DNP000
    document.largeimg.title= largeimg;
    //image title = DNP001
    document.addl1.title= addl1;
    // this title is same as text variable

    ...
    }


    //Swaps images for Addtional Images

    function swapAddl1(){
    // --- swap the large image when clicked
    //
    x= document.getElementById('addl1').src;
    y= x.split("/");
    document.largeimg.src='images/collections/'+y[5];
    document.largeimg.title= 'Item# '+y[5];

    //
    // --- swap the text Here is where I am having trouble
    //
    var e=document.getElementById("imgtext");
    e.innerHTML=document.addl1.title;
    //alert(document.addl1.title);

    }


    HTML
    <div class="imgtext">
    default text to be swapped out.
    </div>
    ...
    <a href=#
    onClick="javascript: swapAddl1();">
    <img src="images/thumbs/DNP001_ALT1.jpg" name="addl1" id="addl1" title="" alt="" /></a>

  5. #5
    SitePoint Zealot
    Join Date
    May 2005
    Location
    Suwanee GA
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out. I create a global object called imgtxt, then assign object names, and add my text. The object can then be called based on the thumbnail title name.

    Code:
    var imgtxt = new Object();
    imgtxt["DNP001"]="This is DNP001 text";
    imgtxt["DNP002"]="This is DNP002 text";
    
    
    
    //Swaps images for Addtional Images and Also Likes images....
    
    
    function swapAddl1(){
    ...
    // swap text
    var e=document.getElementById("imgtext");//if(!e)return;
    e.innerHTML=imgtxt[document.addl1.title];
    }


Bookmarks

Posting Permissions

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