variable transfer from js to PHP

arfa · 10-09-2012, 09:53 PM

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

arfa · 10-10-2012, 03:04 AM

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?

xelawho · 10-10-2012, 03:20 AM

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?

arfa · 10-10-2012, 03:31 AM

@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

xelawho · 10-10-2012, 03:39 AM

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])

?

arfa · 10-10-2012, 03:58 AM

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

xelawho · 10-10-2012, 04:33 AM

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>

xelawho · 10-10-2012, 04:42 AM

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>

arfa · 10-10-2012, 04:56 AM

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.

xelawho · 10-10-2012, 05:01 AM

oh, yeah - pics[] was from an earlier idea - I forgot to take that out - it doesn't do anything.

arfa · 10-10-2012, 08:21 PM

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

arfa · 10-11-2012, 02:16 AM

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.

arfa · 10-11-2012, 03:15 AM

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.

xelawho · 10-11-2012, 03:30 AM

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...

arfa · 10-11-2012, 06:09 AM

>> 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