CODEWITHSUNDEEP
javascriptphpjquery
JKus
JKus

Reputation: 3

Gallery fade out & in via jQuery

I've got two little problems with my gallery (here: http://jan.kusenberg.eu/test/fotografie.php). I coded it with a friend and some help from the internet, but now I am not able to solve the last problems:

  1. On start it does not show you pictures and I don't get why.
  2. When changing galleries, the current fades out too fast, the new "flashes" in and then fades in slowly (should be: old fades out, new fades in).

This is the code behind the main gallery page (which then includes sub-pages that only draw the pictures from folders, "fotografie_1.inc.php", for example):

<div id="frame_content">

    <?php
    if ( empty ($_GET['content']) or !$_GET['content']) { $file = 'fotografie_1.inc.php'; } else {
    $file = $_GET['content'].".inc.php";}
    if(file_exists($file)) {
        include($file);
        }   
    ?> 

</div>

<script>
function getthings(param1, param2)
        {
            $.ajax({
                url: "fotografie_1.inc.php",
                type: "GET",
                data: { chapter : param1, content : param2 },
                async: true
            }).done(function(data) {
                $("#frame_content").fadeOut("slow");
                $("#frame_content").empty();
                $("#frame_content").append(data);
                $("#frame_content").fadeIn("slow");
            });
        }
</script>

What am I doing wrong?

Upvotes: 0

Views: 31

Answers (2)

apokryfos
apokryfos

Reputation: 40681

http://api.jquery.com/fadeout/ You're fading in and out simultaneously which may look odd. Try:

<div id="frame_content">

    <?php
    if (empty($_GET['content']) or ! $_GET['content']) {
        $file = 'fotografie_1.inc.php';
    } else {
        $file = $_GET['content'] . ".inc.php";
    }
    if (file_exists($file)) {
        include($file);
    }
    ?> 

</div>

<script>
    function getthings(param1, param2) {
        $.ajax({
            url: "fotografie_1.inc.php",
            type: "GET",
            data: {chapter: param1, content: param2},
            async: true
        }).done(function (data) {
            $("#frame_content").fadeOut("slow", function () { //Callback for when the fadeout is done
                $("#frame_content").empty();
                $("#frame_content").append(data);
                $("#frame_content").fadeIn("slow");
            });
        });
    }
    $(document).ready(function () {
        getthings(1, 'fotographie_1'); // or whatever default is sensible
    });
</script>

Upvotes: 0

kasynych
kasynych

Reputation: 50

JS should be like following:

function getthings(param1, param2)
        {
            $.ajax({
                url: "fotografie_1.inc.php",
                type: "GET",
                data: { chapter : param1, content : param2 },
                async: true
            }).done(function(data) {
                $("#frame_content").fadeOut("slow",function(){
                     $("#frame_content").empty();
                     $("#frame_content").hide();
                     $("#frame_content").append(data);
                     $("#frame_content").fadeIn("slow");

                });
            });
        }

Upvotes: 1

Related Questions