Question

this is my problem. i am creating my own image popup in my site.

this is the script before the popup

<script> clicked = $('#gatb-1').click(function() { 
  return this.getAttribute('imid') }); </script>

*note: clicked is the global variable

this is the picture code:

<?php foreach ($the_picture as $picture) : ?>
<a id="gatb-1" imid="http://somesite.com/img/image.jpg" class="glr">
<div class="picture">
<img src="http://somesite.com/img/image.jpg" width="340px">
</div>
</a>
<?php endforeach; ?>

then the popup code is called below the picture code, this is the script when the popup display:block

this is the popup div:

<div class="popup">
<script>
$(document).ready(function() { 
    $('#thmg').attr('src', clicked); }); 
</script>
<table>
<tr>
<td>left link</td>
<td><div class="picts"><img id="thmg" src="target here"></div></td>
<td>Right link</td>
</table>
</div>

i had also tried this code before the popup, but it is the same. always return the [object Object] or returned null

$(this).attr('imid')

the result is like this:

<img src="[object object]">

so, how can i pass the attribute? or am i doing something wrong?

Answer 1

i have found it! its not about the false code or anything.
its just because of the <script></script> is different global. its because i have the <script></script> in two places on 1 file.

<script> 
 clicked = $('#gatb-1').click(function() { 
  return this.getAttribute('imid') }); 
</script>

then access the variable in another <script></script> is the one that’s making it not to work.

<script>
$(document).ready( function() {
       $('#thmg').attr('src', clicked);
});
</script>

so, the solution is, combine all the JQuery in one <script></script> only.

<script>
$(document).ready( function(){
   $('#gatb-1').click( function(){
    var clicked = $(this).attr('imid');
    $('#thmg').attr('src', clicked);
});
});
</script>