jQuery PHP gallery with page refresh

jQuery PHP gallery with page refresh

本文关键字：page refresh with gallery PHP jQuery      更新时间：2023-09-26

我正在尝试为我的 joomla 设置一个包含 6 张照片的自定义照片库。当用户按下第二个按钮时，页面将被刷新，在基本 url 中添加了一个小的变化，带有第一张图片的div 将消失，第二个图像div 持有人将出现。

我写了一些代码，但它不起作用。

<div style="width:728px; float:left; margin-top:10px; margin-bottom:10px;">

<div style="width:728px; float:left; padding-bottom:5px; margin-top:5px;">
<div id="pic1" style="padding:2px; margin:auto;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/001.jpg" width="310" height="262" /></div>
<div id="pic2" style="padding:2px; margin:auto; display:none;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/1.jpg" width="310" height="234" border="0" style="margin:0 auto;" /></div>
<div id="pic3" style="padding:2px; margin:auto; display:none;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/2.jpg" width="310" height="210" border="0" style="margin:0 auto;" /></div>
<div id="pic4" style="padding:2px; margin:auto; display:none;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/3.jpg" width="310" height="194" border="0" style="margin:0 auto;" /></div>
<div id="pic5" style="padding:2px; margin:auto; display:none;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/4.jpg" width="310" height="194" border="0" style="margin:0 auto;" /></div>
<div id="pic6" style="padding:2px; margin:auto; display:none;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/5.jpg" width="310" height="210" border="0" style="margin:0 auto;" /></div>
</div>

<div style="width:300px; height:40px; float:left; margin-top:6px; margin-left:200px;">
<div class="pic1" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">1</div>
<div class="pic2" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">2</div>
<div class="pic3" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">3</div>
<div class="pic4" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">4</div>
<div class="pic5" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">5</div>
<div class="pic6" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">6</div>
</div>

<div style="clear:both;"></div>
<script type="text/javascript">
$(document).ready(function(){
var currentURL = window.location.href;
var p1 = "/1/";
var p2 = "/2/";
var p3 = "/3/";
var p4 = "/4/";
var p5 = "/5/";
var p6 = "/6/";
var p1url = window.location.href + p1;
var p2url = window.location.href + p2;
var p3url = window.location.href + p3;
var p4url = window.location.href + p4;
var p5url = window.location.href + p5;
var p6url = window.location.href + p6;

$(".pic2").click(function() {
$("#pic1").hide();
$("#pic3").hide();
$("#pic4").hide();
$("#pic5").hide();
$("#pic6").hide();
window.location.href = p2url;
$("#pic2").fadeIn("fast");
});

$(".pic3").click(function() {
$("#pic1").hide();
$("#pic2").hide();
$("#pic4").hide();
$("#pic5").hide();
$("#pic6").hide();
window.location.href = p3url;
$("#pic3").fadeIn("fast");
});
$(".pic4").click(function() {
$("#pic1").hide();
$("#pic2").hide();
$("#pic3").hide();
$("#pic5").hide();
$("#pic6").hide();
window.location.href = p4url;
$("#pic4").fadeIn("fast");
});
$(".pic5").click(function() {
$("#pic1").hide();
$("#pic2").hide();
$("#pic3").hide();
$("#pic4").hide();
$("#pic6").hide();
window.location.href = p5url;
$("#pic5").fadeIn("fast");
});
$(".pic6").click(function() {
$("#pic1").hide();
$("#pic2").hide();
$("#pic3").hide();
$("#pic4").hide();
$("#pic5").hide();
window.location.href = p6url;
$("#pic6").fadeIn("fast");
});

});
</script>
</div>
很难

说出你到底想做什么。但是，如果您注释掉所有以 window.location.href = 开头的行，您将获得一些功能：当您单击数字时，照片会以淡出效果更改。你还需要做什么？

下次请在 http://jsfiddle.net/上发布您的HTML/JavaScript，如下所示：http://jsfiddle.net/qs3Nx/

更新

好的，既然您想在重新加载页面后更改图像，请尝试以下操作：

var currentURL = window.location.href;
var splitURL = currentURL.split('?');
var baseURL = splitURL[0];
var pic = splitURL.length > 1 ? splitURL[1] : 'pic1';
$("div[id^='pic']").hide();
$("#" + pic).fadeIn('fast');
$("div[class^='pic']").click(function(){
    var newURL = baseURL + '?' + $(this).attr('class');
    window.location.href = newURL;
    console.log(newURL);
});

试试这段代码，它只会播放点击的div，但不会刷新页面：

$("div[class^='pic']").click(function(){
    $("div[class^='pic']").hide();
    $(this).show();
})

小提琴代码：http://jsfiddle.net/9r3Fu/1/

使用joomla时，为什么不能使用 php 来获取 url 变量，如果您想刷新页面，请摆脱window.location因为使用可以为此放置锚标记

看看 
<style>
    .pic {
        width: 40px;
        height: 34px;
        padding-top: 6px;
        background-color: #000;
        color: #FFF;
        text-align: center;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 20px;
        margin-right: 8px;
        float: left;
        cursor: pointer;
    }
    #pic1, #pic2, #pic3, #pic4, #pic5, #pic6 {
        padding:2px; margin:auto; display:none;
    }
</style>
    <div style="width:728px; float:left; margin-top:10px; margin-bottom:10px;">

       <div style="width:728px; float:left; padding-bottom:5px; margin-top:5px;">
       <div id="pic1" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/001.jpg" width="310" height="262" /></div>
       <div id="pic2" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/1.jpg" width="310" height="234" border="0" style="margin:0 auto;" /></div>
       <div id="pic3" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/2.jpg" width="310" height="210" border="0" style="margin:0 auto;" /></div>
       <div id="pic4" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/3.jpg" width="310" height="194" border="0" style="margin:0 auto;" /></div>
       <div id="pic5" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/4.jpg" width="310" height="194" border="0" style="margin:0 auto;" /></div>
       <div id="pic6" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/5.jpg" width="310" height="210" border="0" style="margin:0 auto;" /></div>
       </div>

       <div style="width:300px; height:40px; float:left; margin-top:6px; margin-left:200px;">
       <div class="pic" ><a href="?p=1">1</a></div>
       <div class="pic" ><a href="?p=2">2</a></div>
       <div class="pic" ><a href="?p=3">3</a></div>
       <div class="pic" ><a href="?p=4">4</a></div>
       <div class="pic" ><a href="?p=5">5</a></div>
       <div class="pic" ><a href="?p=6">6</a></div>
       </div>

        <script type="text/javascript">
       var show_image='<?php if($_REQUEST["p"]){ echo  $_REQUEST["p"];}else{ echo "1"; } ?>';
        $(document).ready(function(){
        $("#pic"+show_image).fadeIn("fast");
        });
            </script>

通过javascript获取查询字符串的其他方法请参阅PHP有$_GET变量，HTML有什么？

    function urlParameter(name) {
        var results = new RegExp('[''?&]' + name + '=([^&#]*)').exec(window.location.href);
        return results[1] || 0;
    }
    var show_image;
    if (urlParameter('p')) {
        show_image = urlParameter('p')
    } else {
        show_image = 1
    }
    $(document).ready(function () {
        $("#pic" + show_image).fadeIn("fast");
    });
相关文章：