using variables from php while loop as a variable in js function

seany123 · April 8, 2015

I want to create a list of images which when the cursor hovers over; another image is displayed so i found this: http://www.dyn-web.com/code/tooltips/ and i created the code below.

<html>
    <head>
        <script src="tooltip/js/dw_tooltip_c.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            
            dw_Tooltip.defaultProps = {
                //supportTouch: true, // set false by default
                wrapFn: dw_Tooltip.wrapImageOverText // or dw_Tooltip.wrapTextOverImage
            }

            dw_Tooltip.content_vars = {
                L1: {
                    img: '/new_image.jpg',
                    txt: 'caption to go here'
                }
            }
            
        </script>
        
        <style type="text/css">
            div#tipDiv {
                font-size:11px; line-height:1.2;
                color:#000; background-color:#E1E5F1; 
                border:1px solid #667295; padding:4px;
                max-width:100%; 
            }
            
            /* for divs with classes img and txt 
            used in dw_Tooltip.wrapImageOverText and other image-text formatting functions */
            div#tipDiv div.img { 
                text-align:center; 
                margin:4px 0; 
                }
            div#tipDiv div.txt { 
                text-align:center; 
                margin:4px 0;
                }
        </style>
    </head>
    <body>
        <a href="." class="showTip L1"><img width='120px' height="120px" src="image.jpg" /></a>
    </body>
</html>

it works fine with static values but i want to retrieve all of the image urls from my db and display them in a list and then when hovering the image that is shown relates to the value received from the db, so i created the while loop which looks something like this:

<?php
$get_all_photos = mysqli_query($db, "select * from photos WHERE user_id='1'");

while ($photo = mysqli_fetch_array($get_all_photos)) {
    $url = "$photo['url']";
?>
    <a href='' class="showTip L1"><img src="<?php echo $url;?>"/></a>
<?php
}
?>

how do i now assign the values from the while loop in the javascript above?

i have already tried something as simple this:

            dw_Tooltip.content_vars = {
                L1: {
                    img: '<?php echo $url;?>',
                    txt: '<?php echo $caption;?>'
                }

if anyone can help that would be awesome

thanks

Destramic · April 8, 2015

maybe something like this?

<script>
dw_Tooltip.content_vars = {
L1: {    

<?php
$get_all_photos = mysqli_query($db, "select * from photos WHERE user_id='1'");
$photo_urls     = array();

while ($photo = mysqli_fetch_array($get_all_photos)) {
    
    $photo_urls[] = $photo['url'];
?>
    img: '<?php echo $photo['url']; ?>',
    txt: '<?php echo $photo['capture']; ?>'
                
<?php
}
?>
} }
</script>

<?php 
foreach ($photo_urls as $url){
  ?>
    <a href='' class="showTip L1"><img src="<?php echo $url; ?>"/></a>
<?php 
}
?>

seany123 · April 8, 2015

Thanks for your answer and help! it has helped ALOT!! i tried the method but its not working 100%

it does work if i LIMIT 1 on the mysql query,

so im assuming its happening because all of the images are wrapped with the same class="showTip L1" which javascript cant determine between.

<?php
require('main_inc.php');
?>
<html>
    <head>
            <style type="text/css">
            div#tipDiv {
                font-size:11px; line-height:1.2;
                color:#000; background-color:#E1E5F1; 
                border:1px solid #667295; padding:4px;
                max-width:100%; 
            }
            
            /* for divs with classes img and txt 
            used in dw_Tooltip.wrapImageOverText and other image-text formatting functions */
            div#tipDiv div.img { 
                text-align:center; 
                margin:4px 0; 
                }
            div#tipDiv div.txt { 
                text-align:center; 
                margin:4px 0;
                }
        </style>
    
        <script src="tooltip/js/dw_tooltip_c.js" type="text/javascript"></script>

        <script type="text/javascript">
            dw_Tooltip.defaultProps = {
            //supportTouch: true, // set false by default
            wrapFn: dw_Tooltip.wrapImageOverText // or dw_Tooltip.wrapTextOverImage
            }
                        
            dw_Tooltip.content_vars = {
            L1: {    

            <?php
            $get_all_photos = mysqli_query($db, "select * from photos WHERE user_id='1' and deleted='0'");
            $photo_urls     = array();

            while ($photo = mysqli_fetch_array($get_all_photos)) {

                $photo_urls[] = $photo['filename'];
            ?>
                img: 'photos/<?php echo $photo['filename']; ?>',
                txt: '<?php echo $photo['caption']; ?>'

            <?php
            }
            ?>
            }}
        </script>

        <?php 
        foreach ($photo_urls as $url){
        ?>
            <a href='' class='showTip L1'><img height='120px' width='120px' src='photos/cropped/cropped_<?php echo $url; ?>'/></a>
        <?php 
        }
        ?>
    </head>
</html>

this is the source code of the above code all the variables look to have been successfully passed to the js:

<html>
    <head>
            <style type="text/css">
            div#tipDiv {
                font-size:11px; line-height:1.2;
                color:#000; background-color:#E1E5F1; 
                border:1px solid #667295; padding:4px;
                max-width:100%; 
            }
            
            /* for divs with classes img and txt 
            used in dw_Tooltip.wrapImageOverText and other image-text formatting functions */
            div#tipDiv div.img { 
                text-align:center; 
                margin:4px 0; 
                }
            div#tipDiv div.txt { 
                text-align:center; 
                margin:4px 0;
                }
        </style>
    
        <script src="tooltip/js/dw_tooltip_c.js" type="text/javascript"></script>

        <script type="text/javascript">
            dw_Tooltip.defaultProps = {
            //supportTouch: true, // set false by default
            wrapFn: dw_Tooltip.wrapImageOverText // or dw_Tooltip.wrapTextOverImage
            }
                        
            dw_Tooltip.content_vars = {
            L1: {    

                            img: 'photos/0ab17af02b41816d0515aaa0e7d6d98bc7abe4ff.jpg',
                txt: ''

                            img: 'photos/48c76fa82f9faa598f5f7691dfc61a61e0c40039.jpg',
                txt: ''

                        }}
        </script>

                    <a href='' class='showTip L1'><img height='120px' width='120px' src='photos/cropped/cropped_0ab17af02b41816d0515aaa0e7d6d98bc7abe4ff.jpg'/></a>
                    <a href='' class='showTip L1'><img height='120px' width='120px' src='photos/cropped/cropped_48c76fa82f9faa598f5f7691dfc61a61e0c40039.jpg'/></a>
            </head>
</html>

seany123 · April 8, 2015

Thanks for the help! i fixed the other problems with PHP $i++ and renaming L1 based on $i

very happy with the result!

Destramic · April 9, 2015

glad to have helped

Sign In

using variables from php while loop as a variable in js function

Recommended Posts

seany123

Link to comment

Share on other sites

Destramic

Link to comment

Share on other sites

seany123

Link to comment

Share on other sites

seany123

Link to comment

Share on other sites

Destramic

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information