Jquery 相册中插入php代码后出现的奇诡现象.......在线等！

小弟几天前在网上看到了个Jquery制作的相册特效，效果看起来还真的不错，于是有拿来自己试着玩玩的心态，一看里面的代码，发现图片是固定的连接，于是马上上想到，我把里面的图片连接换成数据库里面动态的连接不是也可以吗，想到之后马上就到该页面html代码的最上面插入了连接数据库和查找数据库的php代码，同时也把地下的图片路径换成了动态的了，其他的地方是一点都没动，可结果是我没想到的，浏览的时候那个相册出现了变形，而且功能也变了，当时当我把php代码删除后又把图片路径换成固定的后就又好了..............那个郁闷啊！！！
<?php
include("../conn/conn.php");
$id=$_GET['ID'];
//$sql = mysql_query("select * from tbl_product where ID='$id'");
$sql=mysql_query("select * from tbl_product where ID='47'");
$row = mysql_fetch_array($sql); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>1111111111111</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Full Page Image Gallery with jQuery - with scollable thumbnails and full screen preview" />
        <meta name="keywords" content="image gallery, jquery, full page, full screen, css3, auto scroll, scrollable, fancy, photography, portfolio"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/><h1 class="title"></h1>
<div id="fp_gallery" class="fp_gallery">
<img src="images/1.jpg" alt="" class="fp_preview" style="display:none"/>
<div class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="outer_container">
<div id="thumbScroller">
<div class="container">

<div class="content">
<div><a href="#"><img src="up/200410419534375.jpg" alt="up/200410419534375.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="<?php echo "$row[pic2]";?>" alt="<?php echo "$row[pic2]";?>" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="<?php echo "$row[pic3]";?>" alt="<?php echo "$row[pic3]";?>" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="<?php echo "$row[pic4]";?>" alt="<?php echo "$row[pic4]";?>" class="thumb" /></a></div>
</div>

  </div>
</div>
</div>
我这样写有什么问题吗.....望达人们帮我之间迷津,感激不尽！！！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<?php echo $row['pic2'];?>
这个打印出来路径对么？
<?php echo "$row[pic2]";?>打印出来的这个路径是正确的，图片是有的就是里面的图片的位置变了，以前是横着在底下显示的，可现在是竖着在左边显示了，里面的样式我压根就没改....
如果图片能显示，但是样式没了，那很有可能是class="thumb"这句没起作用。规范下你的代码：看下是否正常
                        <div class="content">
                            <div><a href="#"><img src="<?php echo $row['pic2'];?>" alt="<?php echo $row['pic2'];?>" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="<?php echo $row['pic3'];?>" alt="<?php echo $row['pic3'];?>" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="<?php echo $row['pic4'];?>" alt="<?php echo $row['pic4'];?>" class="thumb" /></a></div>
                        </div>
这个是这个插件的连接....http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/
按你的意思呢，我把一个正常的这个插件的后面那个 class="thumb"改成class="thumb_1"按理的话应该是不起作用的，可结果是正常的，我就是在不插入php的前提下，在正常页面中html代码的最上面插入任意字符，那个页面的样式就变成和我插入php代码的一样了....
这是正常时候的源码：太长了，我分开来发吧....<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Full Page Image Gallery with jQuery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Full Page Image Gallery with jQuery - with scollable thumbnails and full screen preview" />
        <meta name="keywords" content="image gallery, jquery, full page, full screen, css3, auto scroll, scrollable, fancy, photography, portfolio"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
span.reference{
font-family:Arial;
position:fixed;
right:10px;
top:10px;
font-size:10px;
}
span.reference a{
color:#fff;
text-transform:uppercase;
text-decoration:none;
text-shadow:1px 1px 1px #000;
margin-left:20px;
}
span.reference a:hover{
color:#ddd;
}
h1.title{
width:919px;
height:148px;
position:fixed;
top:10px;
left:10px;
text-indent:-9000px;
background:transparent url(images/icons/title.png) no-repeat top left;
z-index:2;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(window).load(function() {
sliderLeft=$('#thumbScroller .container').position().left;
padding=$('#outer_container').css('paddingRight').replace("px", "");
sliderWidth=$(window).width()-padding;
$('#thumbScroller').css('width',sliderWidth);
var totalContent=0;
$('#thumbScroller .content').each(function () {
totalContent+=$(this).innerWidth();
$('#thumbScroller .container').css('width',totalContent);
});

$('#thumbScroller').mousemove(function(e){
//alert("aaaaaaaaaaaa");
if($('#thumbScroller  .container').width()>sliderWidth){
var mouseCoords=(e.pageX - this.offsetLeft);
var mousePercentX=mouseCoords/sliderWidth;
var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
var thePosA=mouseCoords-destX;
var thePosB=destX-mouseCoords;
var animSpeed=600; //ease amount
var easeType='easeOutCirc';
if(mouseCoords==destX){
$('#thumbScroller .container').stop();
}
else if(mouseCoords>destX){
//$('#thumbScroller .container').css('left',-thePosA); //without easing
$('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
}
else if(mouseCoords<destX){
//$('#thumbScroller .container').css('left',thePosB); //without easing
$('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
}
}
});
$('#thumbScroller  .thumb').each(function () {
$(this).fadeTo(fadeSpeed, 0.6);
});
var fadeSpeed=200;
$('#thumbScroller .thumb').hover(
function(){ //mouse over
$(this).fadeTo(fadeSpeed, 1);
},
function(){ //mouse out
$(this).fadeTo(fadeSpeed, 0.6);
}
);
});
$(window).resize(function() {
//$('#thumbScroller .container').css('left',sliderLeft); //without easing
$('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
$('#thumbScroller').css('width',$(window).width()-padding);
sliderWidth=$(window).width()-padding;
});
</script>
    </head>    <body>
<h1 class="title">Mark Sebastian - Full Page Image Gallery with jQuery</h1>
<div id="fp_gallery" class="fp_gallery">
<img src="images/1.jpg" alt="" class="fp_preview" style="display:none;"/>
<div class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div><a href="#"><img src="images/1.jpg" alt="images/1.jpg" class="thumb_1" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/thumbs/2.jpg" alt="images/2.jpg" class="thumb_1" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/thumbs/3.jpg" alt="images/3.jpg" class="thumb_1" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/thumbs/4.jpg" alt="images/4.jpg" class="thumb_1" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/thumbs/5.jpg" alt="images/5.jpg" class="thumb_1" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/6.jpg" alt="images/6.jpg" class="thumb_1" /></a></div>
</div>
                        <div class="content">
<div><a href="#"><img src="images/7.jpg" alt="images/7.jpg" class="thumb_1" /></a></div>
</div>
                        <div class="content">
<div><a href="#"><img src="images/8.jpg" alt="images/8.jpg" class="thumb_1" /></a></div>
</div>
                        <div class="content">
<div><a href="#"><img src="images/9.jpg" alt="images/9.jpg" class="thumb_1" /></a></div>
</div>
                        <div class="content">
<div><a href="#"><img src="images/10.jpg" alt="images/10.jpg" class="thumb_1" /></a></div>
</div>
                        <div class="content">
<div><a href="#"><img src="images/11.jpg" alt="images/11.jpg" class="thumb_1" /></a></div>
</div>
</div>
</div>
</div>
这是下半部分源码：
<div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs11111111</div>
</div>
        <div>
            <span class="reference">
                <a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/">back to the Codrops tutorial</a>
<a href="http://www.flickr.com/photos/jsebastian/">Photos by Mark Sebastian</a>
            </span>
</div>                <script type="text/javascript">
            $(function() {
//current thumb's index being viewed
var current = -1;
//cache some elements
var $btn_thumbs = $('#fp_thumbtoggle');
var $loader = $('#fp_loading');
var $btn_next = $('#fp_next');
var $btn_prev = $('#fp_prev');
var $thumbScroller = $('#thumbScroller');

//total number of thumbs
var nmb_thumbs = $thumbScroller.find('.content').length;

//preload thumbs
var cnt_thumbs = 0;
for(var i=0;i<nmb_thumbs;++i){
var $thumb = $thumbScroller.find('.content:nth-child('+parseInt(i+1)+')');
$('<img/>').load(function(){
++cnt_thumbs;
if(cnt_thumbs == nmb_thumbs)
//display the thumbs on the bottom of the page
showThumbs(2000);
}).attr('src',$thumb.find('img').attr('src'));
}

//make the document scrollable
//when the the mouse is moved up/down
//the user will be able to see the full image
makeScrollable();

//clicking on a thumb...
$thumbScroller.find('.content').bind('click',function(e){
var $content= $(this);
var $elem = $content.find('img');
//keep track of the current clicked thumb
//it will be used for the navigation arrows
current = $content.index()+1;
//get the positions of the clicked thumb
var pos_left = $elem.offset().left;
var pos_top = $elem.offset().top;
//clone the thumb and place
//the clone on the top of it
var $clone = $elem.clone()
.addClass('clone')
.css({
'position':'fixed',
'left': pos_left + 'px',
'top': pos_top + 'px'
}).insertAfter($('BODY'));

var windowW = $(window).width();
var windowH = $(window).height();

//animate the clone to the center of the page
$clone.stop()
.animate({
'left': windowW/2 + 'px',
'top': windowH/2 + 'px',
'margin-left' :-$clone.width()/2 -5 + 'px',
'margin-top': -$clone.height()/2 -5 + 'px'
},500,
function(){
var $theClone = $(this);
var ratio = $clone.width()/120;
var final_w = 400*ratio;

$loader.show();

//expand the clone when large image is loaded
$('<img class="fp_preview"/>').load(function(){
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
//expand clone
$theClone.animate({
'opacity' : 0,
'top' : windowH/2 + 'px',
'left' : windowW/2 + 'px',
'margin-top' : '-200px',
'margin-left' : -final_w/2 + 'px',
'width' : final_w + 'px',
'height' : '400px'
},1000,function(){$(this).remove();});
//now we have two large images on the page
//fadeOut the old one so that the new one gets shown
$currImage.fadeOut(2000,function(){
$(this).remove();
});
//show the navigation arrows
showNav();
}).attr('src',$elem.attr('alt'));
});
//hide the thumbs container
hideThumbs();
e.preventDefault();
});

//clicking on the "show thumbs"
//displays the thumbs container and hides
//the navigation arrows
$btn_thumbs.bind('click',function(){
showThumbs(500);
hideNav();
});

function hideThumbs(){
$('#outer_container').stop().animate({'bottom':'-160px'},500);
showThumbsBtn();
} function showThumbs(speed){
$('#outer_container').stop().animate({'bottom':'0px'},speed);
hideThumbsBtn();
}

function hideThumbsBtn(){
$btn_thumbs.stop().animate({'bottom':'-50px'},500);
} function showThumbsBtn(){
$btn_thumbs.stop().animate({'bottom':'0px'},500);
} function hideNav(){
$btn_next.stop().animate({'right':'-50px'},500);
$btn_prev.stop().animate({'left':'-50px'},500);
} function showNav(){
$btn_next.stop().animate({'right':'0px'},500);
$btn_prev.stop().animate({'left':'0px'},500);
} //events for navigating through the set of images
$btn_next.bind('click',showNext);
$btn_prev.bind('click',showPrev);

//the aim is to load the new image,
//place it before the old one and fadeOut the old one
//we use the current variable to keep track which
//image comes next / before
function showNext(){
++current;
var $e_next = $thumbScroller.find('.content:nth-child('+current+')');
if($e_next.length == 0){
current = 1;
$e_next = $thumbScroller.find('.content:nth-child('+current+')');
}
$loader.show();
$('<img class="fp_preview"/>').load(function(){
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){$(this).remove();});
}).attr('src',$e_next.find('img').attr('alt'));
}

function showPrev(){
--current;
var $e_next = $thumbScroller.find('.content:nth-child('+current+')');
if($e_next.length == 0){
current = nmb_thumbs;
$e_next = $thumbScroller.find('.content:nth-child('+current+')');
}
$loader.show();
$('<img class="fp_preview"/>').load(function(){
var $newimg = $(this);
var $currImage = $('#fp_gallery').children('img:first');
$newimg.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){$(this).remove();});
}).attr('src',$e_next.find('img').attr('alt'));
}

                function makeScrollable(){
$(document).bind('mousemove',function(e){
var top = (e.pageY - $(document).scrollTop()/2) ;
$(document).scrollTop(top);
                    });
}
            });
        </script>
    </body>
</html>
你没必要发源码出来，看下你文件（html和php的）的格式，
保存为utf-8无bom格式能正常显示么？
怎么保存为保存为utf-8无bom格式，我用的DREAMWEAVER ，这个能保存为utf-8无bom格式吗，我没找到...
没用过dw不知道。我用notepad++ 可以改编码格式
其他的集成开发环境zend Stdio等也可以。你先测试下是不是bom头的问题。
按照你说的那个软件我下载了，试着把里面的格式改为了你说的那个utf-8无bom格式，并且改过之后直接另存为了，可结果还是不理想，感觉没什么效果