Jump to content

slider working ok on localhost but not on host?

lovephp

By lovephp
in PHP Coding Help

 Share

Recommended Posts

lovephp Advanced Member

lovephp

Posted
Posted

what is wrong in here that when i try to run this online i get just one image and rest of the images not being fetch also responsiveness is not working online but it works perfectly on my localhost using wamp

 

<?php
//signup.php
include 'adm/connect.php';
$pid = $_REQUEST['id'];
$sql = "SELECT
        *
        FROM
            topics
        WHERE
            topic_id = " . mysql_real_escape_string($pid);
        $result = mysql_query($sql);
        while($row = mysql_fetch_assoc($result))
        {
        $top = stripslashes($row['topic_subject']);        
        }
        
        
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TOPIC | <?php echo $top; ?> - site.com</title>
     <link rel="stylesheet" href="css/responsee.css">
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
    <!-- Caption Style -->
    <style>
        .captionOrange, .captionBlack
        {
            color: #fff;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            border-radius: 4px;
        }
        .captionOrange
        {
            background: #EB5100;
            background-color: rgba(235, 81, 0, 0.6);
        }
        .captionBlack
        {
            font-size:16px;
            background: #000;
            background-color: rgba(0, 0, 0, 0.4);
        }
        a.captionOrange, A.captionOrange:active, A.captionOrange:visited
        {
            color: #ffffff;
            text-decoration: none;
        }
        a.captionOrange:hover
        {
            color: #eb5100;
            text-decoration: underline;
            background-color: #eeeeee;
            background-color: rgba(238, 238, 238, 0.7);
        }
        .bricon
        {
            background: url(img/browser-icons.png);
        }
    </style>
    
    <script type="text/javascript" src="js-slide/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js-slide/jssor.js"></script>
            <script type="text/javascript" src="js-slide/jssor.slider.js"></script>
    <script>
        jQuery(document).ready(function ($) {
            var options = {
                $AutoPlay: true,                 
                $AutoPlaySteps: 1,          
                $AutoPlayInterval: 8000,      
                $PauseOnHover: 1,  

                $ArrowKeyNavigation: true,               
                $SlideDuration: 500,                    
                $MinDragOffsetToSlide: 20,            
                $SlideSpacing: 0,                                    
                $DisplayPieces: 1,                                  
                $ParkingPosition: 0,                           
                $UISearchMode: 1,             
                $PlayOrientation: 1,                                
                $DragOrientation: 3,              
                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$,              
                    $ChanceToShow: 1,                             
                    $AutoCenter: 2,                                
                    $Steps: 1                                       
                },

                $ThumbnailNavigatorOptions: {
                    $Class: $JssorThumbnailNavigator$,             
                    $ChanceToShow: 2,                               

                    $ActionMode: 1,                                
                    $AutoCenter: 3,                                
                    $Lanes: 1,                                     
                    $SpacingY: 3,                                  
                    $DisplayPieces: 9,                              
                    $ParkingPosition: 260,                          
                    $Orientation: 1,                                
                    $DisableDrag: false                            
                }
            };
            var jssor_slider2 = new $JssorSlider$("slider2_container", options);
            function ScaleSlider() {
                var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;
                if (parentWidth)
                    jssor_slider2.$ScaleWidth(Math.min(parentWidth, 600));
                else
                    window.setTimeout(ScaleSlider, 30);
            }
            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
          });
    </script>

    <div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 380px; overflow: hidden; ">


        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>


        <div u="slides" style="cursor: move; position: absolute; right: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
            <?php
            $qry = "SELECT post_img FROM posts WHERE post_topic = '" . mysql_real_escape_string($pid)."' ORDER BY post_id ASC";
            $result = mysql_query($qry);    
            while($row = mysql_fetch_array($result))
                {        
                $remove_symbols = array('../');
               $img = str_replace($remove_symbols, " ", $row['post_img']);
                echo '
                <div>
                <img src="'.$img.'" alt="Post Img" class="topicimg">
                <img u="thumb" src="'.$img.'" />
                
            </div>
            
            ';
                }
                
            ?>    
            
        </div>
        
        <style>
           .jssora02l, .jssora02r, .jssora02ldn, .jssora02rdn
            {
                position: absolute;
                cursor: pointer;
                display: block;
                background: url(img/a02.png) no-repeat;
                overflow:hidden;
            }
            .jssora02l { background-position: -3px -33px; }
            .jssora02r { background-position: -63px -33px; }
            .jssora02l:hover { background-position: -123px -33px; }
            .jssora02r:hover { background-position: -183px -33px; }
            .jssora02ldn { background-position: -243px -33px; }
            .jssora02rdn { background-position: -303px -33px; }
        </style>
 
        <span u="arrowleft" class="jssora02l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
        </span>
    
        <span u="arrowright" class="jssora02r" style="width: 55px; height: 55px; top: 123px; right: 8px">
        </span>
    
        <div u="thumbnavigator" class="jssort03" style="position: absolute; width: 600px; height: 50px; left:0px; bottom: 0px;">
            <div style=" background-color: #000; filter:alpha(opacity=30); opacity:.3; width: 100%; height:100%;"></div>

       
            <style>
               .jssort03 .w, .jssort03 .pav:hover .w
                {
                    position: absolute;
                    width: 60px;
                    height: 30px;
                    border: white 1px dashed;
                }
                * html .jssort03 .w
                {
                    width /**/: 62px;
                    height /**/: 32px;
                }
                .jssort03 .pdn .w, .jssort03 .pav .w { border-style: solid; }
                .jssort03 .c
                {
                    width: 62px;
                    height: 32px;
                    filter:  alpha(opacity=45);
                    opacity: .45;
                    
                    transition: opacity .6s;
                    -moz-transition: opacity .6s;
                    -webkit-transition: opacity .6s;
                    -o-transition: opacity .6s;
                }
                .jssort03 .p:hover .c, .jssort03 .pav .c
                {
                    filter:  alpha(opacity=0);
                    opacity: 0;
                }
                .jssort03 .p:hover .c
                {
                    transition: none;
                    -moz-transition: none;
                    -webkit-transition: none;
                    -o-transition: none;
                }
            </style>
            <div u="slides" style="cursor: move;">
                <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 62px; HEIGHT: 32px; TOP: 0; LEFT: 0;">
                    <div class=w><div u="thumbnailtemplate" style=" WIDTH: 100%; HEIGHT: 100%; border: none;position:absolute; TOP: 0; LEFT: 0;"></div></div>
                    <div class=c style="POSITION: absolute; BACKGROUND-COLOR: #000; TOP: 0; LEFT: 0">
                    </div>
                </div>
            </div>  
        </div>   
       
    </div>

</body>
</html>

Jacques1 Prolific Member

Jacques1

Posted
Posted

Well, what are we supposed to do now? Without knowing anything about your database content, your files and your server environments, it's impossible to find out the exact difference between your local server and your production server. But you can investigate the problem, because you're sitting right in front of the screen: Do the expected database entries exist? Do the slider images exist in the right path? Are there any PHP errors in the server log? Are there any client-side errors in the browser console? We need specific information.

 

Besides that, there are plenty of other issues:

  • Your first query is vulnerable to SQL injection attacks, because mysql_real_escape_string() is useless when the result isn't wrapped in single quotes (the function only escapes the content of an SQL string). Since you already know PDO and prepared statements, I wonder why you're still running around with the ancient mysql_* functions and putting your server at risk.
  • Parts of your code don't make much sense: Why do you replace “..” path segments with spaces in your image paths? Won't that fudge up the entire path? Why is there a fetch loop after the first query when you only want to fetch a single record? Why not just fetch once? Why do you select all columns when you only want a single one of them? Why not just select this specific column?
  • You really need to stop cramming all your PHPSQLHTMLCSSJavaScript into a single file. If a few lines of PHP code are buried in hundreds of lines of unrelated stuff, this drastically decreases readability, increases the error rate and makes people shy away from your code. JavaScript code belongs into JavaScript files, CSS markup belongs into CSS files, and HTML markup belongs into template files (or should at least be separated from the code: PHP at the top, HTML at the bottom).
  • Like 1
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.