我正在尝试为我的 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");
});