Mick Redman

Wednesday 29 September 2010

Using jQuery Dialog as a lightbox

Your first thought may be "Why?".
I main reason I have for doing this is size. jQuery UI has often been loaded for other reasons within my applications and Dialog is a part of jQuery UI. The result, it's lightweight.

Also, like many of my examples, the code is now easily transferable.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<style type="text/css">
html, body
{
font-family:sans-serif;
}
.imageDiv
{
display:none;
}
.ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar
{
background:#FFFFFF;
border-color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
function openDialog(imageId, titleVal)
{
$("#"+imageId).dialog(
{
show:'blind',
width:'auto',
modal:true,
title:titleVal,
resizable:false
});
}
</script>
</head>
<body>
<div id="img1" class="imageDiv"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" /></div>
<a href="#" onclick="openDialog('img1', 'Church');"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b_t.jpg" alt="Church" /></a>
<div id="img2" class="imageDiv"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f.jpg" /></div>
<a href="#" onclick="openDialog('img2', 'Avenue');"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f_t.jpg" alt="Avenue" /></a>
</body>
</html>

Tuesday 28 September 2010

Panel Slider

The example below uses the excellent Coda-Slider by Niall Doherty at http://www.ndoherty.biz/tag/coda-slider/
All I have done is simplified the implementation, making it easy to begin using the code.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Panel Slider</title>
<style>
.coda-slider-wrapper.arrows .coda-slider, .coda-slider .panel
{
width: 600px
}
.coda-nav ul li a.current
{
background:#CCCCCC;
}
.coda-nav ul, .coda-slider-wrapper
{
clear:both;
}
.coda-nav ul, .coda-nav ul li a, .coda-slider .panel
{
display:block;
}
.coda-nav ul, .coda-slider
{
overflow:hidden;
}
.coda-nav ul li a, .coda-slider, .coda-slider .panel, .coda-nav-left, .coda-nav-right
{
float:left;
}
.coda-slider, .coda-slider .panel-container
{
position:relative;
}
.coda-nav ul
{
margin:auto;
}
.coda-nav ul li
{
display:inline;
}
.coda-nav ul li a
{
background:#000000;
color:#FFFFFF;
margin-right:1px;
text-decoration:none;
}
.coda-slider-wrapper{

overflow:auto;
}
.coda-nav-left a, .coda-nav-right a
{
display:none;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://www.ndoherty.biz/demos/coda-slider/2.0/javascripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function()
{
$('#coda-slider-1').codaSlider();
});
</script>
</head>
<body>
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
</div>
</div>
</div>
</body>
</html>

Image Slideshow

Here is a simple implementation of an image slideshow using the jQuery application at http://www.serie3.info/s3slider/
See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slideshow</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#s3slider
{
width:240px;
height:180px;
position:relative;
overflow:hidden;
}
#s3sliderContent
{
width:240px;
position: absolute;
bottom:0;
margin-left:0;
list-style:none;
}
.s3sliderImage
{
float:left;
position:relative;
display: none;
}
.s3sliderImage span
{
position: absolute;
left:0;
width:240px;
background-color:#000000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
color:#FFFFFF;
display:none;
bottom:0;
}
.clear
{
clear: both;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script>
$(document).ready(function()
{
$('#s3slider').s3Slider(
{
timeOut:4000
});
});
</script>
</head>
<body>
<div id="s3slider">
   <ul id="s3sliderContent">
   <li class="s3sliderImage">
   <img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" />
   <span>Your text comes here</span>
   </li>
   <li class="s3sliderImage">
   <img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" />
   <span>Your text comes here</span>
   </li>
   <div class="clear s3sliderImage"></div>
   </ul>
</div>
</body>
</html>

Friday 24 September 2010

SMTP from XAMPP on a localhost using your Google mail Account

This may seem a little obscure but believe me, this blog could save you a lot of time.

Imagine you have XAMPP installed on your Windows computer as localhost. You are writing an application which requires e-mails to be sent and you need to test your code. You have a Google e-mail account and you'd like to use the SMTP service which comes with that.

Let's start by creating our little PHP script which we are going to use for testing.

<?php
mail('jimmy@googlemail.com','test subject','test body');
?>
There. That wasn't too difficult was it.

Next we need to edit our php.ini file. The php.ini file will be in something like C:\XAMPP\php. We are looking for the [mail function] variables. For which we need entries like this:

[mail function]
sendmail_path = "C:/xampp/sendmail/sendmail.exe -t"

Couple things to note from above. The smtp_port and look carefully at the slashes of the sendmail_path.

Now we are on to our final step. We need to edit sendmail.php which would be under something like C:\XAMPP\sendmail. You need to replace the contents of the file with something like this:

[sendmail]
smtp_server=smtp.googlemail.com
smtp_port=587
error_logfile=error.log
debug_logfile=debug.log
auth_username=myaccountname@googlemail.com
auth_password=mypassword
force_sender=myaccountname@googlemail.com

You must now restart your Apache service in order for it to work.

Now to test your script. Open up your web browser and load it like this http://localhost/myscript.php
Check your Google mail account to see if it's arrived.

Good luck!

Simple layout #12

This design puts to earlier blog posts together. Simple layout #11 and Static Image Overlay.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #12</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart, #overlayedText
{
color:#FFFFFF;
}
#bottomPart, #overlayedText
{
background:#000000;
}
#topPart
{
height:200px;
background:#73C2FF;
}
h1
{
font-size:4.4em;
}
#topPart h1
{
padding-top:136px;
}
#middlePart
{
height:400px;
}
#overlayedText, #bottomPart h1
{
position:relative;
}
#overlayedText
{
clear:both;
top:-144px;
font-size:2em;
height:84px;
padding-top:80px;
opacity:0.6;
filter:alpha(opacity=60);
}
h1, #overlayedText
{
padding-left:10px;
}
#middlePart h1
{
float:left;
color:#FF0000;
width:360px;
}
#middlePart img
{
float:right;
}
#bottomPart
{
min-height:200px;
}
#bottomPart h1
{
top:-10px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>MY TITLE</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
<img src="http://farm5.static.flickr.com/4145/5020151472_5651a1321d.jpg" alt="girl" />
<div id="overlayedText">My overlayed text</div>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

Static Image Overlay

Here is how to put those descriptions placed at the bottom of your images with a semi-opaque background.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Image Overlay</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
}
.imgHolder p, .imgHolder img
{
display:block;
width:100px;
}
.imgHolder p
{
position:relative;
top:-46px;
background:#000000;
color:#FFFFFF;
font-size:0.8em;
height:24px;
padding-top:8px;
text-align:center;
opacity:0.6;
filter:alpha(opacity=60);
}
</style>
</head>
<body>
<div id="mainContent">
<h1>Static Image Overlay</h1>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4092/5019367535_053592b411_t.jpg" alt="red ring" /><p>red ring</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4083/5019367559_f575c61142_t.jpg" alt="tea pot" /><p>tea pot</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4086/5019973694_8dd67f644d_t.jpg" alt="fruit basket" /><p>fruit basket</p></div>
</div>
</body>
</html>