Location: PHPKode > scripts > Fancy Free PHP Image Gallery > fancy-img/manage.php
<?php require 'config.php'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="crivion.com" />

	<title>Scriptoggle - Fancy Free Image Gallery Script</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
	$(function() {
	   
        $( "button" ).button();
       
		$( "#resizable" ).resizable({
			helper: "ui-resizable-helper",
            animate : true,
            resize: function(event, ui) { 
                var rwidth = ui.size.width;
                var rheight = ui.size.height;
                $("#rwidth").html(rwidth);
                $("#rheight").html(rheight);                
            }
		});
        
        $( "#step2" ).click(function()
        {
            $.get("ajax/sessions.php?action=dim&width=" + $("#rwidth").html() + "&height=" + $("#rheight").html(), function(data)
            {
                if(data != "ok")
                {
                    alert(data);
                }else{
                    document.location.href = "manage.php?step=2";
                }
            });
        });
        
        $( ".align" ).click(function()
        {
            var alignment = $(this).attr("id");
            $.get("ajax/sessions.php?action=align&align=" + alignment, function(data)
            {
                if(data != "ok")
                {
                    alert(data);
                }else{
                    document.location.href = "manage.php?step=3";
                }
            }); 
        });
        
        $( ".draggable" ).draggable({ containment: "#containment-wrapper", scroll: false });
        
        $( "#save" ).click(function()
        {
             $(".draggable").each(function()
             {
                var theID = $(this).attr("id");
                var pos = $(this).offset();
                var w = pos.left;
                var t = pos.top;
                
                $.get("ajax/sessions.php?action=save&id=" + theID + "&left=" + w + "&top=" + t, function(data)
                {
                    if(data != "ok")
                    {
                        alert(data);
                    }else{
                        document.location.href = "manage.php?step=4";
                    }
                }); 
             });
        });
        
        
        $( "#write" ).click(function()
        {
            $.get("ajax/sessions.php?action=write", function(data)
                {
                    if(data != "ok")
                    {
                        alert(data);
                    }else{
                        document.location.href = "index.php";
                    }
                }); 
        });
        
        <?php 
        if(isset($_GET['step']) && $_GET['step'] == "4")
        {
            if($_SESSION['align'] == "center")
            {
                ?>
                $(body).css("text-align", "center");
                <?php
            }  
        }
        ?>
        
	});
	</script>
    
</head>

<body>

<?php 
if(isset($_GET['step'])) 
{
   $step = (int) $_GET['step'];   
}else{
   $step = 1;
}

switch($step)
{
    
    case 1:
    
        ?>
        
        <h1>Step 1 : Define area where images will be placed</h1>

        <div>
        <h2>Width : <span id="rwidth">500</span>px | Height : <span id="rheight">250</span>px</h2>
        </div>
        
        <div id="resizable" class="ui-widget-content">
        	<h3 class="ui-widget-header">Resize me from the bottom-right corner : this is where images will appear inside</h3>
        </div>
        
        <button id="step2">Go to step 2</button>
        
        <?php
    
    break;
    
    case 2:
        ?>
        
        <h1>Step 2 : Choose where to align the container</h1>
        
        <button class="align" id="left">Left</button><br />
        <button class="align" id="center">Center</button><br />
        <button class="align" id="right">Right</button>
        
        <?php    
    break;
    
    case 3:
        ?>
        <h3>Step 3 : Customize the look &amp; feel of the images</h3>
        
        <h3>Your scanned images</h3>        
        <div style="border: 1px solid #999;width:<?php print $_SESSION['w']; ?>px;" class="floatleft">
            <?php
            $pics = scandir('images') or die('Cannot scan images folder');
            foreach($pics as $p)
            {
                if($p != "." && $p != "..") {
                    print '<img src="images/'.$p.'" class="draggable" id="'.$p.'"/>';
                }
            }
            ?>
            <div style="clear: both;"></div>
        </div>
        
        <h3>Drag Images Here</h3>
        
        <div style="border: 1px solid #999;width:<?php print $_SESSION['w']; ?>px;height:<?php print $_SESSION['h']; ?>px" id="containment-wrapper">
            
        </div>
        
        <div style="clear: both;"></div>
        
        <h3>Hit this button in order to save everything!</h3>
        <button id="save">Save &amp; Preview</button>
        
        <?php
        
     break;
     
     case 4:
     
        switch($_SESSION['align'])
        {
            case "left":
                $divname = "leftwrapper";
            break;
            case "right":
                $divname = "rightwrapper";
            break;
            case "center":
                $divname = "centerwrapper";
            break;
        }
       
                
        ?>
        
        <div id="<?php print $divname; ?>" style="width:<?php print $_SESSION['w']; ?>px;height:<?php print $_SESSION['h']; ?>px">
        
        <?php
        foreach($_SESSION as $picID => $pos)
        {            
            if(is_array($pos))
            {
                print '<div style="width:100px;height:90px;position:absolute; left: '.$pos['left'].'px; top: '.$pos['top'].'px">
                        <img src="images/'.$picID.'" width="100" height="90" />
                        </div>';
            }
        }
        ?>    
        
        
        </div>
        
        <button id="write">Save &amp; Go to gallery</button>
        
        <?php
     
     break;
    
}

?>

</body>
</html>
Return current item: Fancy Free PHP Image Gallery