在更改圖像或重新加載頁面時將頁面保留在一個位置？
[英]Keeping page in one place while changing images or reloading page?
問題描述
我已經檢查了這個網站同樣的問題，但我不想在沒有頁面重新加載的情況下更改這個項目的圖像 - 它需要重新加載。 雖然當我點擊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 «</a>";
} else {
$prevNext .= "«";
}
$prevNext .= " | ";
if ($ni <= $ti) {
$niFile = $img[$ni];
$prevNext .= "<a href=\"" . $_SERVER['PHP_SELF'] . "?p=" . $niFile . "\" title=\"Next image\">» Next</a>";
} else {
$prevNext .= "»";
}
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>
3 個解決方案
解決方案1
1 已采納 2015-11-30 11:14:37
如果您想自動向右滾動到底部，具體取決於圖像的大小 - 您可以使用以下內容：
$(".section group").animate({ scrollTop: $(document).height() }, "fast");
return false;
然后將其添加到您的頁面：
<div class="section group" align="center" style="overflow-y: scroll;height:520px;width:520px 240px">
然后你要做的就是擺弄寬度和高度屬性，直到它們符合你的設計。
解決方案2
0 2015-11-30 11:08:50
JavaScript的
獲取當前滾動：
document.documentElement.scrollTop + document.body.scrollTop
並將其添加到重新加載的頁面，以便滾動到與原來相同的位置。
解決方案3
0 2015-11-30 11:55:05
我會嘗試將滾動位置傳遞到下一頁，並使用javascript恢復該設置。 我的例子包括jQuery，讓生活更輕松。 簡單的Javascript可能會涉及一些跨瀏覽器兼容性的麻煩。
您可以在<head>部分中插入此（已測試）示例代碼：
<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>
如果您已經在頁面中使用了jQuery，那么當然不需要再次包含它。
在FF上重新加載頁面而不更改頁面
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.