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 15 of 15
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts

    variable transfer from js to PHP

    This is somewhat related to jquery but is primarily a .js issue.

    I am converting an existing PHP photo album. I have the image load working but can't see how to get the respective caption key from the js to pull from $caption_array.
    This is the code I am using - where the div class=change is actually a string of thumbnails each with the ID set as the filename. Click one and the div class=bg-wrapper is loaded with the main image.
    Code:
    <div class=change>thumb(s)</div>
    <script>
    $(function() {
    $('<img>').attr({'src':'<?php echo $image; ?>','id':'bg','title':''}).appendTo('#bg-wrapper').parent().fadeIn(1000);
        $('.change').click(function(e) { 
        e.preventDefault(); 
        var image = '<?php echo $album; ?>/'+$(this).attr("id").replace("tn_","");
            $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr('src', ''+image); 
                  $(this).fadeIn(800); }); }); });
    </script>
    <div class=bg-wrapper></div>
    I hope this is clear.

    thanks

  • #2
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I have done the proverbial googling and a common response is "can't be done without page reload".

    BUT... is there a glimmer of hope in Ajax?

    I know zero on this - but will look about.
    Any suggests along the way?

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,907
    Thanks
    56
    Thanked 544 Times in 541 Posts
    can't you pull in caption array when the page loads, make objects that bind the image to the caption and change them both when the click happens?

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    @xelawho
    I have been banging away at this over an hour now )

    And, YES, that is what I am exploring now.
    Code:
    $captions = file($data_file); // pulled from CSV
    <script>
    var caption_array = '<?php echo trim($captions[VAL]); ?>';
    etc...
    Have you any suggestions how I would best pass the array key via the opening thumbnail div?
    <div class=change id=tn_THUMBname>thumb(s)</div>

    My first thought would be to add the number on the end of the id val and do a substr thing [not sure of js equiv]

    Annnnnd, then I presume I would need to do a document.write ?
    Would it have to be inside the parent div?

    not dumb - just new ;]

    thanks

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,907
    Thanks
    56
    Thanked 544 Times in 541 Posts
    document.write, no.

    if the div that you want the caption to me in has the id 'tn_THUMBname' wouldn't it be something like
    Code:
    $('#tn_THUMBname').text(caption_array[0])
    ?

  • Users who have thanked xelawho for this post:

    arfa (10-10-2012)

  • #6
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    scratches head.....
    the issue so often is defining the question - bare with me.

    $data_file has all the captions - not necessarily sequential.
    img_cat.jpg|cat caption here
    pic_dog.jpg|about the dog
    etc.
    So, I will also need to split this array and loop to find the line that matches against
    $(this).attr("id").replace("tn_","")

    it feels close
    thx

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,907
    Thanks
    56
    Thanked 544 Times in 541 Posts
    if your array looks like that, you could do something like this:

    Code:
    <script>
    var data=["img_cat.jpg|cat caption here","pic_dog.jpg|about the dog"];
    var pics=[];
    $(document).ready(function() {
    $.each(data, function(index, value) { 
    $('.change').eq(index).text(value.split("|")[1]).click(function(){
    $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr('src', value.split("|")[0]); 
                  $(this).fadeIn(800); });
    				});
    		});
    });
    </script>

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,907
    Thanks
    56
    Thanked 544 Times in 541 Posts
    or you could use the script to load the thumbnail images in at the same time...

    Code:
    <body>
    <img id="bg"/>
    <div class="change"></div>
    <div class="change"></div>
    
    <script>
    var data=["img_cat.jpg|cat caption here","pic_dog.jpg|about the dog"];
    var pics=[];
    $(document).ready(function() {
    $.each(data, function(index, value) { 
    $('.change').eq(index).html('<img src="tn_'+value.split("|")[0]+'"/><br>'+value.split("|")[1]).click(function(){
    $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr('src', value.split("|")[0]); 
                  $(this).fadeIn(800); });
    				});
    		});
    });
    </script>
    </body>

  • #9
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This looks awesome. Thanks so much.
    Not sure where pics[] fits in.

    The main image div is wrapped in a nice frame and I am hoping to add the caption to a div below that.

    I have to head out now but should have time to test this later on this evening.

    40+ posts since 2006 - I don't do a lot of js so am very grateful for your patience.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,907
    Thanks
    56
    Thanked 544 Times in 541 Posts
    oh, yeah - pics[] was from an earlier idea - I forgot to take that out - it doesn't do anything.

  • #11
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Worked a bit last night but couldn't tease out the logic of your code.
    This is what I have so far - perhaps a bit 'old school' linear but it works. The alert gives the correct caption but I am unsure how to feed it into a div.
    The image div is #bg-wrapper but, again, I can't replicate the logic to feed my caption into another div - say: #img_caption
    Code:
    <script>
    $(function() {
    $('<img>').attr({'src':'<?php echo $image; ?>','id':'bg','title':''}).appendTo('#bg-wrapper').parent().fadeIn(1000); // loads first image on page load
            var captions = [<?php echo $cap_array; ?>];
            var len = captions.length;
        $('.change').click(function(e) { 
        e.preventDefault(); 
                var img_now = $(this).attr("id").replace("tn_",""); 
                    for (var i=0; i<len; ++i) { var file = captions[i].split("|");
                        if (file[0]==img_now) { alert(file[1]); }}
        
        var image = '<?php echo $album; ?>/'+$(this).attr("id").replace("tn_","");
            $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr('src', ''+image); 
                  $(this).fadeIn(800); }); }); });
    </script>
    Yes, I figured pic was a bit of mind flotsam.
    Cheers - ak

  • #12
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Still poking about.
    I have a FF solution but no IE
    Code:
    <script>
    $(function() {
    $('<img>').attr({'src':'<?php echo $image; ?>','id':'bg','title':''}).appendTo('#bg-wrapper').parent().fadeIn(1000);
            var captions = [<?php echo $cap_array; ?>];
            var len = captions.length;
        $('.change').click(function(e) { 
        e.preventDefault();
                var img_now = $(this).attr("id").replace("tn_","");
                    for (var i=0; i<len; ++i) { var file = captions[i].split("|");
                        if (file[0]==img_now) { var this_cap = file[1]; }} // works in FF but not IE
    
    //var mytext=document.createTextNode(this_cap);
    //document.getElementById("img_caption").appendChild(mytext); // Adds - but not replaces
    
     img_caption.innerHTML = this_cap; // seems OK in FF & IE - but no caption from loop. :(
    
        
        var image = '<?php echo $album; ?>/'+$(this).attr("id").replace("tn_","");
            $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr('src', ''+image); 
                  $(this).fadeIn(800); }); }); });
    </script>
    I suspect this may look a bit clumsy but I am a work in progress...
    PS - an alert test on var len has FF=18 IE=17 - which is weird.
    Last edited by arfa; 10-11-2012 at 02:21 AM.

  • #13
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks fran55k.

    js is such a muddle for me.
    Part of my issue was in the caption array itself - fixed.

    My issue now is testing that the caption is not empty - null string - undefined.
    if (file[0]==img_now && ?? ) { var this_cap = file[1]; }
    tried with ?? as:
    file[1].length>1
    file[1]!==''
    file[1]!==NULL
    file[1]!=='undefined'

    Fortunately the existing script is working fine. This is just my aiming to add dynamic content - not something I have much experience with. Getting into jquery and such.

  • #14
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,907
    Thanks
    56
    Thanked 544 Times in 541 Posts
    I'm sorry... it makes me sleepy just looking at your code.

    You should really get at least a basic grip on javascript before branching off into jQuery. And if you need this done now, there are a million ready-written slideshow scripts out there, in javascript and jQuery...

  • #15
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    >> sleepy...
    Mostly I hack existing js.
    The main code of mine above is the i loop and innerhtml. The rest is borrowed.
    My PHP is a tad more elegant.

    >> a basic grip on javascript
    I don't use it a lot.
    jquery I try to use out-of-the-box

    >> a million ready-written slideshow scripts
    Indeed. I am hoping to avoid the heavy image load that most require. Up to 100 pics at around 50kb or more takes a while. I figure most people only look at 5 to 10 images per album.

    I have this working well enough for now.
    Thanks again for your patience.

    arfa


  •  

    Posting Permissions

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