I have a main php file that loads an external php file. This is the code in my main php file:
<php>
<head>
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="ajax.js"></script>
<link rel="stylesheet" href="colorbox.css" />
<script src="js/jquery.colorbox.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<link href="jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
});
</script>
</head>
<div id="tengah" class="jimgMenu" >
<ul>
<li class="landscapes"> </li>
<li class="people"> </li>
<li class="nature"> </li>
</ul>
</div>
<div id="content" class="clearfix shadow">
<div id="sidebar" class="left">
<div id='ResponseDiv'> </div>
<div id="menu" class="inner">
</div>
</div>
<div id="main" class="right">
<h2>Detail</h2>
<div id='ResponseDiv2'> </div>
</div>
</div>
</div>
</php>
I have a function in ajax.js that calls an external php page named ajaxpage. Here the code in ajax.js:
function ajaxpage(url, containerid) {
var page_request = false
if(window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if(window.ActiveXObject) { // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} catch(e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch(e) {}
}
} else return false
page_request.onreadystatechange = function () {
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid) {
if(page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)) document.getElementById(containerid).innerHTML = page_request.responseText
}
The problem is when I try to load "7.php" into my main.php the 7.php file is loaded but the animation in 7.php not working.
Does anyone know why this is happening?
this is the content of 7.php
<php>
<html>
<head>
<style type="text/css">
body {
background: #0F0D0D;
padding: 30px 0 0 50px;
}
div.sc_menu_wrapper {
position: relative;
height: 500px;
/* Make bigger than a photo, because we need a place for a scrollbar. */
width: 160px;
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 130px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* When image support is turned off */
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading {
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
/* Make background a bit transparent for browsers that support rgba */
background: rgba(0, 0, 0, 0.5);
}
/* Here are styles for a link to an article. Not for you :) */
#back {
margin-left: 8px;
color: gray;
font-size: 18px;
text-decoration: none;
}
#back:hover {
text-decoration: underline;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">/*<![CDATA[*/
function makeScrollable(wrapper, scrollable){
// Get jQuery elements
var wrapper = $(wrapper), scrollable = $(scrollable);
// Hide images until they are not loaded
scrollable.hide();
var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
// Set function that will check if all images are loaded
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;
// Counts number of images that are succesfully loaded
images.each(function(){
if (this.complete) completed++;
});
if (completed == images.length){
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){
loading.hide();
// Remove scrollbars
wrapper.css({overflow: 'hidden'});
scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);
function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 99;
// Cache for performance
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Using outer height to include padding too
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We could use onresize event, but it's just not worth doing that
// var wrapperOffset = wrapper.offset();
// Create a invisible tooltip
var tooltip = $('<div class="sc_menu_tooltip"></div>')
.css('opacity', 0)
.appendTo(wrapper);
// Save menu titles
scrollable.find('a').each(function(){
$(this).data('tooltipText', this.title);
});
// Remove default tooltip
scrollable.find('a').removeAttr('title');
// Remove default tooltip in IE
scrollable.find('img').removeAttr('alt');
var lastTarget;
//When user move mouse over menu
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;
var wrapperOffset = wrapper.offset();
var tooltipLeft = e.pageX - wrapperOffset.left;
// Do not let tooltip to move out of menu.
// Because overflow is set to hidden, we will not be able too see it
tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
// Move tooltip under the mouse when we are in the higher part of the menu
if (e.pageY - wrapperOffset.top < wrapperHeight/2){
tooltipTop += 80;
}
tooltip.css({top: tooltipTop, left: tooltipLeft});
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
// Setting interval helps solving perfomance problems in IE
var interval = setInterval(function(){
if (!lastTarget) return;
var currentText = tooltip.text();
if (lastTarget.nodeName == 'IMG'){
// We've attached data to a link, not image
var newText = $(lastTarget).parent().data('tooltipText');
// Show tooltip with the new text
if (currentText != newText) {
tooltip
.stop(true)
.css('opacity', 0)
.text(newText)
.animate({opacity: 1}, 1000);
}
}
}, 200);
// Hide tooltip when leaving menu
wrapper.mouseleave(function(){
lastTarget = false;
tooltip.stop(true).css('opacity', 0).text('');
});
/*
//Usage of hover event resulted in performance problems
scrollable.find('a').hover(function(){
tooltip
.stop()
.css('opacity', 0)
.text($(this).data('tooltipText'))
.animate({opacity: 1}, 1000);
}, function(){
tooltip
.stop()
.animate({opacity: 0}, 300);
});
*/
}
}
$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
</script>
</head>
<body>
<div style="overflow: hidden;" class="sc_menu_wrapper">
<div style="display: block;" class="sc_menu">
</div>
<div style="display: none;" class="loading">Loading...</div><div style="opacity: 0;" class="sc_menu_tooltip"></div></div>
</body></html>
</php>
See Hotel
This code will work...
Related
I wonder if you can, how to call up a page for example test.php, so that it opens in a div and not in the new page, thank you.
<!DOCTYPE html PUBLIC ">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<script type="text/javascript">
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<style type="text/css">
#leftcolumn{
float:left;
width:150px;
height: 400px;
border: 3px solid black;
padding: 5px;
padding-left: 8px;
}
#leftcolumn a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}
#leftcolumn a:hover{
background-color: #FFFF80;
}
#rightcolumn{
float:left;
width:550px;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}
* html #rightcolumn{ /*IE only style*/
height: 400px;
}
</style>
</head>
<body>
<div id="leftcolumn">
Menu
Google
<div style="margin-top: 2em">Load CSS & JS files</div>
Load "style.css" and "tooltip.js"
</div>
<div id="rightcolumn"><h3>Choose a page to load.</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>
</body>
</html>
In this way, if menu.php recall works and I view the page on the local server, but if you call the page with google, does not open.
Menu
<div id="rightcolumn"></div>
<script>
$(document).ready(function(){
$("#menu").click(function(){
$("#rightcolumn").load("http://localhost/player/menu.php");
});
});
</script>
You can do like this...and so on for all elements...
I tested this script in normal .php file but when put code in wordpress header file script doesn't worked.
Can someone show me how to put CarouFredSel slider inside wordpress theme?
Here is the code i used in .php file and all works just fine:
<!-- include jQuery + carouFredSel plugin -->
<script type="text/javascript" language="javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.2.1-packed.js"></script>
<!-- optionally include helper plugins -->
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.transit.min.js"></script>
<script type="text/javascript" language="javascript" src="helper-plugins/jquery.ba-throttle-debounce.min.js"></script>
<!-- fire plugin onDocumentReady -->
<script type="text/javascript" language="javascript">
$(function() {
// Basic carousel, no options
$('#foo0').carouFredSel();
// Basic carousel + timer, using CSS-transitions
$('#foo1').carouFredSel({
auto: {
pauseOnHover: 'resume',
progress: '#timer1'
}
}, {
transition: true
});
// Scrolled by user interaction
$('#foo2').carouFredSel({
auto: false,
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
mousewheel: true,
swipe: {
onMouse: true,
onTouch: true
}
});
// Variable number of visible items with variable sizes
$('#foo3').carouFredSel({
width: 360,
height: 'auto',
prev: '#prev3',
next: '#next3',
auto: false
});
// Responsive layout, resizing the items
$('#foo4').carouFredSel({
responsive: true,
width: '100%',
scroll: 2,
items: {
width: 400,
// height: '30%', // optionally resize item-height
visible: {
min: 2,
max: 6
}
}
});
// Fuild layout, centering the items
$('#foo5').carouFredSel({
width: '100%',
scroll: 2
});
});
</script>
<style type="text/css" media="all">
.list_carousel {
background-color: #ccc;
margin: 0 0 30px 60px;
width: 900px;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 40px;
color: #999;
text-align: center;
background-color: #eee;
border: 5px solid #999;
width: 400px;
height: 400px;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.list_carousel.responsive {
width: auto;
margin-left: 0;
}
.clearfix {
float: none;
clear: both;
}
</style>
<p>Basic carousel.</p>
<div class="list_carousel">
<ul id="foo1">
<?php
$html = "";
$url = "http://rss.dnevnik.hr/index.rss";
$xml = simplexml_load_file($url);
for ($i = 0; $i <10; $i++) {
$title = $xml->channel->item[$i]->title;
$link = $xml->channel->item[$i]->link;
$opis = $xml->channel->item[$i]->description;
$html .= "<li><div><a href='$link'><h3>$opis<h3></a></div></li>";}
echo $html;
?>
</ul>
<div class="clearfix"></div>
</div>
<br />
I am trying to implement Rotate3Di, found here: http://www.zachstronaut.com/projects/rotate3di/
I can get my images to flip, but the back side is only showing a mirror image of the front and not unique content that I am pulling from a database. Thanks for any help in advance.
<script type="text/javascript" language="javascript" charset="utf-8">
$(document).ready(function () {
$('#movienav li div.back').hide().css('left', 0);
function mySideChange(front) {
if (front) {
$(this).parent().find('div.front').show();
$(this).parent().find('div.back').hide();
} else {
$(this).parent().find('div.front').hide();
$(this).parent().find('div.back').show();
}
}
$('#movienav li').hover(
function () {
$(this).find('div').stop().rotate3Di('flip', 180, 1000, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 1000, {sideChange: mySideChange});
}
);
});
</script>
HTML
<div id="movienav">
<ul>
<li><div class="front"><img src="<?php echo $imglink; ?>" width="340" height="450" class="dvdcover" /></div>
<div class="back">
<?php echo $description; ?>
</div>
</li>
</ul>
</div>
CSS
#movienav {
height: 450px;
width:75%;
float:left;
margin-top:25px;
clear:left;
padding-bottom: 45px;
}
#movienav li {
width: 340px;
height: 450px;
float: left;
margin-right: 10px;
position: relative;
display:inline;
list-style:none;
}
#movienav li div {
width: 340px;
height: 450px;
overflow: hidden;
background: #161616;
position: absolute;
top: 0;
left: 0;
}
#movienav li div.back {
left: -999em;
padding-bottom: 15px;
background-color:#161616; /*max-height:450px; overflow:auto;*/
margin-top: 0;
}
SOLVED
Changed above lines to:
$('#movienav li').hover(
function () {
$(this).find('div').stop().rotate3Di('180', 400, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 400, {sideChange: mySideChange});
}
);
http://davidwalsh.name/css-flip
I think you want backface-visibility: hidden;
I'll be honest I've only done this via CSS and not with javascript, but I had the same issue at first until I set the backface-visibility. Doing everything via javascript might require some extra magic.
Hi i'm using this code to fetch new images from a folder to populate an slideshow.
after each cycle ajax should check content of the folder to see if any there was any
changes(pictures added or removed) then on the next cycle it should make the new changes to
the slideshow
<html>
<meta http-equiv="refresh" content="1000"/>
<head>
<title>Slideshow</title>
<style type="text/css">
#slideshow
#slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
#slide {width: 370px; height: 220px; padding: 0; margin: 0 auto; }
#myslides {
width: 370px;
height: 220px;
padding: 0;
margin: 0 auto;
}
#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 350px;
height: 200px;
top: 0;
left: 0
}
</style>
</head>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
fx: 'fade',
speed: 700,
timeout: 8000
});
});
</script>
<body>
<div id="slideshow">
</body>
</html>
<script>
$(function(){
window.onload("fetchImages()", 2);
function fetchImages() {
$.ajax({
type: "GET",
url: "load.php"
}).done(function(response){
var curImgCount = $('#slideshow img').length;
if (response.length > curImgCount) {
for (var i = curImgCount; i < response.length; i++) {
$('#slideshow').append('<img src="images/' + response[i] + '"');
}
}
});
}
});
</script>
and content of php:
<?php
function returnimages($dirname="./images") {
$pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)";
$files = array();
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(preg_match($pattern, $file)){ //if this file is a valid image
$files[] = $file;
}
}
closedir($handle);
}
//sort($files);
natcasesort($files);
return($files);
}
$images = returnimages();
foreach($images as $img)
{
echo json_encode($images);
}
?>
Change your PHP to:
<?php
function returnimages($dirname="./images") {
$pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)";
$files = array();
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(preg_match($pattern, $file)){ //if this file is a valid image
$files[] = $file;
}
}
closedir($handle);
}
//sort($files);
natcasesort($files);
return($files);
}
$images = returnimages();
echo json_encode($images);
?>
and your HTML to:
<html>
<head>
<meta http-equiv="refresh" content="1000"/>
<title>Slideshow</title>
<style type="text/css">
#slideshow {
position: relative;
}
#slideshow,
#slideshow img {
position: absolute;
top: 0px;
left: 0px;
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
#slide {
width: 370px;
height: 220px;
padding: 0;
margin: 0 auto;
}
#myslides {
width: 370px;
height: 220px;
padding: 0;
margin: 0 auto;
}
#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 350px;
height: 200px;
top: 0;
left: 0
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
function loadSlides() {
$.ajax({
type: "GET",
url: "load.php"
}).done(function(response) {
var temp_images = eval("(" + response + ")");
for(ti in temp_images)
{
//alert(temp_images[ti]);
$('#slideshow').append('<img src="images/' + temp_images[ti] + '" alt="">');
}
startSlideshow();
});
}
function startSlideshow()
{
$('#slideshow').cycle({
fx: 'fade',
speed: 700,
timeout: 800
});
}
$(document).ready(function(){
loadSlides();
});
</script>
</head>
<body>
<div id="slideshow" />
</body>
</html>
I'm testing this code and it works fine but why the refresh meta tag? Isn't the point of AJAX to prevent this from happening and make it dynamic? Also, the biggest problem is that you need to set a meta refresh time that is not too long such that images don't take too long to reflect when added or deleted and not too short to prevent some images from showing at all (inevitable at some point).
I created a custom gallery and it works perfectly in internet explorer however in firefox and chrome it doesn't work like it should. The lightbox doesn't pop up on the clicking the thumbnail link, you have to click it twice, when clicked once the backdrop comes up but not the lightbox, but then on clicking the thumbnail twice it centers and pops up. And I have no clue why, please help.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Album</title>
<script type="text/javascript" src="hftpnyc/js/jquery-1.7.1.min.js"></script>
<link href="albums.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="Website/print.css" rel="stylesheet" type="text/css" media="print"/>
<style type="text/css">
body {
}
.backdrop
{ position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background:black;
z-index:50;
display:none;
}
.smllpic a {text-decoration:none;}
.box
{margin:auto;
clear:both;
position:fixed;
max-height:705px;
max-width:905px;
background:black;
z-index:52;
padding:0px;
border:black 1.2px solid;
overflow:hidden;
}
.close
{
position:absolute;
right:6px;
margin-top:3px;
cursor:pointer;
font-size:20px;
font-family:acens;
font-weight:700px;
font-stretch:narrower;
opacity: .3;
}
.smllpic img{cursor:pointer; opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); };
}
</style>
</head>
<body>
<div id="contentcontainer" style="width:100%;clear:both;">
<div id="wrapper" style="width:981px; height:100%; margin:0px auto;">
<div style="margin:0px auto;width:979px;">
<h2 style="font-family:Tahoma, Geneva, sans-serif; color:#333;border-bottom:#A3308E solid 1px; background-color: #E6E6E6;"> Album </h2> </div>
<div style="float:right; margin-right:3px;">
<form action="" method="post">
<a href="Albums.php">
<input type="button" name="Uploadmre" value="Upload more" style="border: 1px solid #d0ccc9;right:0px;background: #fff;color: #5f95ef;font-size: 11px;font-weight: 700;height:22px; margin-right:7px;">
</a>
</form>
</div>
<div id="page-wrap" style=" width:918px; margin: 0px auto;clear:both;">
<?php
error_reporting(0);
/* function: returns files from dir */
function get_files($images_dir,$exts = array('jpeg','gif','png','jpg')) {
$files = array();
if($handle = opendir($images_dir)) {
while(false !== ($file = readdir($handle))) {
$extension = strtolower(get_file_extension($file));
if($extension && in_array($extension,$exts)) {
$files[] = $file;
}
}
closedir($handle);
}
return $files;
}
/* function: returns a file's extension */
function get_file_extension($file_name) {
return substr(strrchr($file_name,'.'),1);
}
$images_dir = 'hftpnyc/thumbs/';
$thumbs_dir = 'hftpnyc/thumbs/thumbnails/';
$thumbs_width = 100;
$images_per_row = 11;
$string = "";
/** generate photo gallery **/
$image_files = get_files($images_dir);
if(count($image_files)) {
$index = 0;
foreach($image_files as $index=>$file) {
$index++;
$thumbnail_image = $thumbs_dir.$file;
//if(!file_exists($thumbnail_image)) {
//$extension = get_file_extension($thumbnail_image);
//if($extension) {
//make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
//}
//}
error_reporting(0);
echo '<div class="smllpic" style=" padding: 0px; margin: 0px; border: 1px solid black; display: block; width: 100px; height:100px; float: left; "> <img id="thumbs" src="',$thumbnail_image,'" width="100px"/></div>';
if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; }
}
}
else {
echo '<p>There are no images in this gallery.</p>';
}
?>
</div>
</div>
</div>
<script type="text/javascript">
$(document).height();
$('.backdrop').height($(document).height());
$(document).ready(function(){
$('.smllpic img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this = $(this);
$this.stop().animate({'opacity':'0.7'},200);
});});
$(window).bind("load", function() {
var preload = new Array();
$(".box").each(function() {
s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1");
preload.push(s)
});
var img = document.createElement('img');
$(img).bind('load', function() {
if(preload[0]) {
this.src = preload.shift();
}
}).trigger('load');
});
$(document).ready(function(){
function centreit(){
//get the height and width of the modal
var modal_height = $('.box').height();
var modal_width = $('.box').width();
//get the height and width of the page
var window_width = $(window).width();
var window_height = $(window).height();
//calculate top and left offset needed for centering
var topp = (window_height - modal_height)/2;
var left = (window_width - modal_width)/2;
//apply new top and left css values
$('.box').css({'top' : topp+'px' , 'left' : left+'px', 'right': left+'px','bottom':topp+'px'}); };
$('.lightbox').click(function(e) {
e.preventDefault(); // keeps new page from loading
var thisPicture = $(this).attr('href'); // path to full sized picture,
function getit(){
$('body').append('<div class="backdrop" label="click to close"></div><div class="box" id="centre" ><div class="close">x</div><div style="cursor:pointer; opacity:1;font-family:Agency FB;margin-top:50%; right:-20px;position:fixed;color:white;font-size:50px; z-index:50;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-moz-box-shadow:0px 0px 5px #444444;-webkit-box-shadow:0px 0px 5px #444444;box-shadow:0px 0px 5px #444444;">></div><div style="cursor:pointer; opacity:.35;font-family:Agency FB;margin-top:50%; left:-20px; position:absolute; font-size:50px;color:white; z-index:70;-webkit-border-radius:5px;-moz-border-radius: 5px; border-radius:5px;-moz-box-shadow:0px 0px 5px #444444; -webkit-box-shadow:0px 0px 5px #444444; box-shadow:0px 0px 5px #444444;"><</div><img class="motown" src="'+thisPicture+'" style="max-height:705px;max-width:905px;z-index:50;"/></div>');
};
$(window).resize(function(){
$('.box').resize();
$('.motown').resize();
centreit();
});
getit();
centreit();
$("html").css("overflow", "hidden");
$('.backdrop').fadeTo(500,0.9);
$('.box').children().fadeIn(1000);
//$('.backdrop').css({ 'display' : 'block', opacity : 0});
$('.close').click(function(){
close_box();});
$('.backdrop').click(function(){
close_box();});
function close_box(){
$('.backdrop').remove();
$('.box').remove();
$("html").css("overflow", "");};
});});
</script>
</body>
</html>
You should try:
margin: 0 auto 0;
left: 0;
right: 0;
To fix the centering. So that would leave you with:
.box
{
margin:0 auto 0;
left: 0;
right: 0;
clear:both;
position:fixed;
max-height:705px;
max-width:905px;
background:black;
z-index:52;
padding:0px;
border:black 1.2px solid;
overflow:hidden;
}