Jump to content

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

seany123

By seany123
in Javascript Help

 Share
Go to solution Solved by Destramic,

Recommended Posts

seany123 Advanced Member

seany123

Posted
Posted (edited)

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

Edited by seany123
Link to comment
Share on other sites
  • Solution
Destramic Advanced Member

Destramic

Posted
  • Solution
Posted (edited)

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 
}
?>
Edited by Destramic
Link to comment
Share on other sites
seany123 Advanced Member

seany123

Posted
  • Author
Posted (edited)

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>
Edited by seany123
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.