Archive | September, 2011

Simple Photo Gallery from img in li

18 Sep

To make a image gallery capable of having a light-box and can move around photos with arrow keys.
I’ll add next and prev buttons in next post.

My html code


	<div id="popopen_wrap">

		<div id="img_holder_bg" >

		</div>

			<div id="img_holder"><img src="" id="maximised" width='600' height='400'></div>

	</div>

	<div id="ribbon_wrap">

		<div id='ribbon'>

			<ul id='list'>

				<li><img id="thumbnail" class="first" src="cal.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="china.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="egypt.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="pyramid.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="rio.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="some.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" src="taj.jpg" width='150' height='150' ></li>

				<li><img id="thumbnail" class="last" src="taj_m.jpg" width='150' height='150' ></li>

				</ul>

				</div>

				</div>

As you can see I’ve put the images in a ul list.
I’ll show you how to do that dynamically with php in later posts.
And there are some wrap divs I’ve used for positioning.
popopen_wrap is the parent div which is displayed with opacity in bg when we click on thumbnail images.
img_holder_bg is div used for backgournd opacity.

Now here is my css file

*{

margin: 0;

padding: 0;

}

ul{

list-style: none;

}

#ribbon ul li{

float: left;

}

#ribbon_wrap{

position: absolute;

width: 100%;

top: 55%;

}

#ribbon{

width: 1000px;

margin: 0 auto;

overflow: hidden;

height: 150px;

}

#popopen_wrap{

width:  100%;

height: 100%;

position: absolute;

display: none;

z-index: 3000;

}

#img_holder_bg{

opacity: 0.7;

background: black;

width:  100%;

height: 100%;

position: absolute;

z-index: 3005;

}

#img_holder_wrap{

height: 600px;

position: absolute;

width: 100%;

}

#img_holder{

position: fixed;

top: 50%;

left: 50%;

margin-left: -300px;

margin-top: -200px;

z-index: 3010;

border: 10px solid white;

}

We are using the fixed sized output images.
The later posts will explain how to auto position when size of the photos changes.

My javascript code

 $(document).ready(function() {
	 $("#img_holder_bg").click(function(){
	   $("#popopen_wrap").hide();
   });
   $("img#thumbnail").click(function(){
	   $("#popopen_wrap").show();
	   $("img#maximised").attr("src",$(this).attr("src"));
	   $(this).addClass("selected");
	   $(document).keydown(function(event){
		   if(event.keyCode==27){
			   $("#popopen_wrap").hide();
			   }
			else if(event.keyCode==39){
				$("img#maximised").attr("src",function(){
					if($(".selected").hasClass('last')){
						$(".selected").removeClass("selected");
						$(".first").addClass("selected");
						return $(".first").attr("src");}
					else {
						$nxt=$(".selected");
						$(".selected").removeClass("selected");
						$nxt.parent().next().children("img#thumbnail").addClass("selected");
						return $(".selected").attr("src");}
					});
				}
			else if(event.keyCode==37){
				$("img#maximised").attr("src",function(){
					if($(".selected").hasClass('first')){
						$(".selected").removeClass("selected");
						$(".last").addClass("selected");
						return $(".last").attr("src");}
					else {
						$prev=$(".selected");
						$(".selected").removeClass("selected");
						$prev.parent().prev().children("img#thumbnail").addClass("selected");
						return $(".selected").attr("src");}
					});
				}

	});
});
});

In fact this javascript code is not entirely mine, one of my friend have written the basic key storke movement using array in pure javascript.
I’ve ported that into jquery and added dynamic checking of what to display next.

Hope you liked it! I’ll update with better

Advertisements

General css to be included in every page

17 Sep

I include this css part in every page.
Its just a good practise to avoid some problems in css.

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
/* customize your colors for selected text here */
::selection{
	background: #A50B0B;
	color: #E9E9E9;
}
::-moz-selection{
	background: #A50B0B;
	color: #E9E9E9;
}
body {
	line-height: 1;
	background: #f5f6f7;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

Thanks for visiting

Simple way to use mysql sanitizer function in php

17 Sep

If you don’t know yet mysql_real_escape_string() is the php function to sanitize a given string for mysql quires so as to prevent sql inejections.

But its irritating to use it every time you want to sanitize.
So, lets simplify the burden.

function __($var){
	return mysql_real_escape_string($var);
	}

By using this function, You just need to put $variable inside __()

$sql="SELECT * FROM `new` WHERE title='".__($_POST['title'])."'";

Thanks for visiting

jquery adding greater than symbol for li which has submenu

17 Sep

I have done this for my need, you can use this code to modify to your need to insert icon or something like that in li which has another li inside it.

My html list structure

<ul class="menu">
<li>Accessories
<ul>
<li>Apparels
</li>
<li>Home items
</li>
</ul>
</li>
<li>Car Accessories
<ul>
<li>Car Speakers
</li>
<li>Car Stereos
<ul>
<li>Pioneer
</li>
<li >Sony
</li>
</ul>
</li>
<li>Car Subwoofers Amplifiers Tweeters
</li>
<li>Other Car Accessories
</li>
</ul>
</li>
</ul>

So, we have three level ul list.

Note here I’m interested in adding ‘>’ symbol for only second level ‘li’ elements which have a ‘ul’ element inside them.
use this jquery algo if your problem matches this logic

$(document).ready(function() {
//on dom ready
    $('ul.menu').children().each(function() {
//looping over children of first level ul
        $(this).children('ul').children().each(function() {
//looping over children of 2nd level ul
            $(this).children('ul').each(function() {
//check for ul child in li element and excecutes the function. each function is added just for the sake of implementing the following function
                $(this).before('<p class="lessthan">&gt;</p>');
           });
        });
    });
});

Live example
http://jsfiddle.net/pahnin/KmMC8/

Thanks for visiting

Update for this code

<?php
function getnavmenu($parent,$root){
	if($parent->count() > 0){
		$endli=true;
		if(!$root){
		echo "<li>".$parent->getname();
		$root=false;$endli=false;}
		echo "<ul>";
		foreach( $parent->children() AS $child ){
			getnavmenu($child,false);
			}
		echo "</ul>";
		if(!$endli){
			echo "</li>";
			$endli=true;}
		}
	else{
		echo "<li>".$parent."</li>";
		}
	}
if (file_exists('blocks/blocknav/nav.xml')) {
    $nav = simplexml_load_file('blocks/blocknav/nav.xml');
 
getnavmenu($nav,true);

}
?>

php parsing xml file into ul and li

17 Sep

I have a xml file

<?xml version='1.0'?>
<map>
	<elements>
		<header>
			<logo>blocklogo</logo>
			<nav>blocknav</nav>
		</header>
		<main>
			<yrh>blockyouarehere</yrh>
			<post>blockpost</post>
		</main>
		<footer>footer</footer>
	</elements>
</map>
footer

I want to print the output as

  • header
    • blocklogo
    • blocknav
  • main
    • blockyouarehere
    • blockpost
  • footer

So, the code I’ve written in php for this is

<?php
$counter=0;
function gettree($parent,$root){
	if($parent->count() > 0){
		if(!$root){
		echo "<li>".$parent->getname()."</li><ul>";}
		else{echo "<ul>";}
		$root=false;
		foreach( $parent->children() AS $child ){
			gettree($child,false);
			}
		echo "</ul>";
		}
	else{
		echo "<li>".$parent."</li>";
		}
	}

if (file_exists('site.xml')) {
    $xml = simplexml_load_file('site.xml');

gettree($xml->elements,true);

} else {
    exit('Failed to open site.xml.');
}
?>

Hoping my code snippets may reduce your burden. Thanks for visiting