jQuery PHP gallery with page refresh

Question

I am trying to setup a custom photo gallery with 6 pics for my joomla. When the user is pressing the 2nd button the page will be refreshed, added a small change in base url, the div with the first pic will disappear and the second image div holder will appear.

I wrote some code but it's not working..

<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>

Why does the URL need to change for this? – Ronnie Aug 21 '13 at 20:22 — Ronnie, Aug 21 '13 at 20:22

janos · Answer 1 · 2013-08-21T21:01:47.977

Hard to tell what exactly you're trying to do. But if you comment out all the lines that begin with window.location.href =, you get something functional: as you click on the numbers the photos change with fade out effect. What else do you need to do?

And next time please post your HTML / JavaScript on http://jsfiddle.net/, like this: http://jsfiddle.net/qs3Nx/

UPDATE

Ok so since you want to change the images after reloading the page, try this:

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);
});

@janos my skills are low thats why i use this hardcoding.. Also i want to do this that you make on http://jsfiddle.net/ but before the next photo appears i want to a page refresh first. is it possible? — Irene T., Aug 21 '13 at 20:31

score 0 · Answer 2 · answered Aug 21 '13 at 20:32

0

Try this code , it will diplay only the div that is clicked,but it wont refresh the page:

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

fiddle code :http://jsfiddle.net/9r3Fu/1/

answered Aug 21 '13 at 20:32

Farhan

752
4
10

Is there any possibility to grab ?id=x the number after id= with jquery? – Irene T. Aug 21 '13 at 20:58
you want to extract value of query string from URL? – Farhan Aug 21 '13 at 21:09

score 0 · Answer 3 · edited May 23 '17 at 12:05

When using joomla why can't you use the php to get the url variables and if you want to refresh the page then get rid of window.location as use can put the anchor tag for this have a look at

<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>

Other way to get the query string through the javascript see PHP has $_GET variable, what does HTML have?

    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");
    });

jQuery PHP gallery with page refresh

3 Answers3