Javascript 在更改图像或重新加载页面时将页面保留在一个位置？_Javascript_Php_Html_Image_Gallery

Javascript 在更改图像或重新加载页面时将页面保留在一个位置？

javascript php html image

Javascript 在更改图像或重新加载页面时将页面保留在一个位置？,javascript,php,html,image,gallery,Javascript,Php,Html,Image,Gallery,我已经检查了这个网站的同类问题，但我不希望在不重新加载页面的情况下更改这个项目上的图像-它需要重新加载。虽然当我点击next或previous按钮时，页面会像它应该做的那样再次跳到顶部，但是有没有一种方法可以解决这个问题，当用户点击下一个图像时，页面会重新加载屏幕上的图像，而不是用户每次都要向下滚动？这是我的剧本： $albumName = "Our Gallery"; // Name your album! /* * Installation: * 1.) Place your phot

我已经检查了这个网站的同类问题，但我不希望在不重新加载页面的情况下更改这个项目上的图像-它需要重新加载。虽然当我点击

next

或

previous

按钮时，页面会像它应该做的那样再次跳到顶部，但是有没有一种方法可以解决这个问题，当用户点击下一个图像时，页面会重新加载屏幕上的图像，而不是用户每次都要向下滚动？这是我的剧本：

$albumName = "Our Gallery"; // Name your album!

/*
 * Installation:
 * 1.) Place your photos into the images directory.
 *      - Photos will be displayed in alphabetical order.
 * 2.) Rename the "basic-php-photo-album" folder to anything you wish.
 *      - Example: paris-photo-album
 * 3.) Upload the renamed folder and all of its contents to your server.
 *      
 * That's it! Make multiple albums by repeating the above 3 steps.
 */

/*
 * You shouldn't need to change anything beyond this.
 *
 */

$p = $_GET['p'];
if ($handle = opendir("uploads")) {
    $i = 1;
    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != "..") {
            $img[$i] = $file;
            if ($p == $img[$i]) {
                $ci = $i;
            }
            $i++;
        }
    }
    closedir($handle);
    $ti = $i - 1;
    $pi = $ci - 1;
    if ($p == "") {
        $ni = $ci + 2;
    } else {
        $ni = $ci + 1;
    }
    $prevNext = "";
    if ($pi > 0) {
        $piFile = $img[$pi];
        $prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $piFile . "\" title=\"Previous image\">Previous &#171</a>";
    } else {
        $prevNext .= "&#171;";
    }
    $prevNext .= " | ";
    if ($ni <= $ti) {
        $niFile = $img[$ni];
        $prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $niFile . "\" title=\"Next image\">&#187 Next</a>";
    } else {
        $prevNext .= "&#187;";
    }
    if ($p == "") {
        $p = $img[1];
    }
}
?> 

<!DOCTYPE HTML>
<html>
<head>
<title>Dave's Caravan Lettings</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="Hire our Deluxe Plus Caravan based in Sandy Bay, Exmouth for an easy, great priced family holiday! Comes complete with all required facilities as standard!">
<meta name="keywords" content="Haven,Holidays,Sandy,Bay,Devon,Cliffs,Exmouth,Beach,Caravan,Hire,Rental,Rent,Cheap,Holiday,Family,Entertainment,Daves,Letting,Lettings,Fun,Best,Stay,Nights,Price,Buy">
<meta name="author" content="BaseEnterprises WebDesign">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">

        td, select, input {
            font-family: arial, helvetica, sans-serif;
            font-size: 11px;
        }


        .hRule {
            border-top: 1px solid #cdcdcd;
            margin: 0px 0px 10px 0px;
        }

        img {
            border: 1px solid #333333;
        }

        .nextPrevious {
            font-size: 18px;
            color: #cdcdcd;
            padding-bottom: 15px;
        }

        a, a:visited {
            color: #cc0000;
            text-decoration: none;
        }
        a:active, a:hover {
            color: #cc0000;
            text-decoration: underline;
        }
    </style>
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="header-bg">
    <div class="wrap">
        <div class="header">
            <div class="logo">
                <h1><a href="index.html">Dave's Caravan Lettings</a></h1>
            </div>
        </div>
        <div class="header-bot">
            <div class="menu">
                <ul>
                    <li class="home"><a href="index.html">Home</a></li>
                    <li class=""><a href="location.html">Location</a></li>
                    <li class=""><a href="facilities.html">Facilities</a></li>
                    <li class=""><a href="availability.php">Availability</a></li>
                    <li class=""><a href="contact.html">Contact Us</a></li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="wrap">
            <span class="banner-img">
                <img src="images/banner2.jpg" alt=""/>
            </span>
        </div>
    </div>
</div>
<div class="main">
 <div class="wrap">
     <div class="content-bot">
                <h3><?php echo $albumName; ?></h3>
                <p>Images sent to us by previous holiday makers staying in our Caravan... See what it's like yourself by browsing the images below...</p><br></br>
                <div class="inner-top">
                    <div class="section group" align="center">



                <div class="hRule"></div>

<table border="0" cellpadding="0" cellspacing="0" align="center">
    <tr align="center">
        <td class="nextPrevious"><?php echo $prevNext; ?></td>
    </tr>
    <tr align="center">
        <td><img src="uploads/<?php echo $p; ?>" alt="<?php echo $$albumName; ?>" border="0" height="300px" width="400px"></td>
    </tr>
</table>






            </div>
            </div>
                <div class="clear"></div>
            </div>

$albumName=“我们的画廊”//命名你的专辑！
/*
*安装：
*1.）将照片放入图像目录。
*-照片将按字母顺序显示。
*2.）将“基本php相册”文件夹重命名为您想要的任何文件夹。
*-例如：巴黎相册
*3.）将重命名的文件夹及其所有内容上载到服务器。
*      
*就这样！重复上述3个步骤制作多个相册。
*/
/*
*除此之外，你不需要做任何改变。
*
*/
$p=$_GET['p']；
如果（$handle=opendir（“上传”））{
$i=1；
while（false！=（$file=readdir（$handle）））{
如果（$file！=“&&&$file！=”）{
$img[$i]=$file；
如果（$p==$img[$i]）{
$ci=$i；
}
$i++；
}
}
closedir（$handle）；
$ti=$i-1；
$pi=$ci-1；
如果（$p==“”）{
$ni=$ci+2；
}否则{
$ni=$ci+1；
}
$prevenxt=“”；
如果（$pi>0）{
$piFile=$img[$pi]；
$prevNext.=“”；
}否则{
$PREVENEXT.=“&171；”；
}
$prevNext.=“|”；
如果（$ni）
戴夫商队出租
td，选择，输入{
字体系列：arial、helvetica、无衬线字体；
字体大小：11px；
}
赫鲁尔先生{
边框顶部：1px实心#cdcdcd；
保证金：0px 0px 10px 0px；
}
img{
边框：1px实心#333333；
}
.nextPrevious{
字号：18px；
颜色：#cdcdcd；
垫底：15px；
}
a、 a:参观了{
颜色：#cc0000；
文字装饰：无；
}
a:活动，a:悬停{
颜色：#cc0000；
文字装饰：下划线；
}
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_GB/sdk.js#xfml=1&version=v2.3”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；







以前住在我们商队的度假者发送给我们的图片…浏览下面的图片，看看你自己是什么样子的…



“alt=”“border=“0”height=“300px”width=“400px”>

JavaScript 使用：

document.documentElement.scrollTop+document.body.scrollTop

并将其添加到重新加载的页面中，使其滚动到原来的位置。

如果您想根据图像的大小自动向右滚动到底部，您可以使用以下方法：

$(".section group").animate({ scrollTop: $(document).height() }, "fast");
  return false;

然后将其添加到您的页面：

<div class="section group" align="center" style="overflow-y: scroll;height:520px;width:520px 240px">

然后，您所要做的就是摆弄宽度和高度属性，直到它们与您的设计匹配。

我会尝试将滚动位置传递到下一页，并使用javascript恢复该设置。我的示例包括jQuery，以简化操作。纯javascript可能会涉及一些跨浏览器兼容性问题。

您可以在

部分中插入此（已测试的）示例代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    $(function() {
        // set scroll position to the previous state, only if it was given
        <?php if( isset($_GET['scrollTop']) ) {
           echo "$('body').scrollTop(" . $_GET['scrollTop'] . ");";
        } ?>
        // append current scroll position parameter to the link
        $('.nextPrevious').on('click', 'a', function(e) {
            e.preventDefault();
            document.location.href = $(this).attr('href') + '&scrollTop=' + $('body').scrollTop();
        });
    });
</script>


$（函数（）{
//仅当给出滚动位置时，才将其设置为上一状态
//将当前滚动位置参数附加到链接
$（'.nextPrevious'）。在（'click'，'a'，函数（e）上{
e、 预防默认值（）；
document.location.href=$（this.attr（'href'）+'&scrollTop='+$（'body'）.scrollTop（）；
});
});

如果你已经在你的页面中使用jQuery，你当然不需要再次包含它。

有多种方法可以实现这一点。将id分配给HTML元素，并将其发送到url中，比如？p=filename#你的HTMLDivContainingImage或简单地使用iFrame。我不想粗鲁，但为什么这是公认的答案？我真的不想进入numer用给定的代码片段解决所有困扰我的问题。。。