Archive for the ‘Programming’ Category
Chapter 3 Storefront Basic Setup
This chapter includes :
1. Storefront requirement
2. Basic application structure
3. Bootstrapping with Zend_Application
4. Global layouts
5. Application build
6. Installing the storefront database
7. Application configuration
8. Logging and debugging
Chapter 2 The Zend MVC Architecture
In this chapter, we will cover the following topics :
1. Zend framework MVC overview
2. The Front Controller
3. The router
4. The dispatcher
5. The Request object
6. The Response object
Chapter 1 Creating a Basic MVC Application
This chapter describe about :
1. What MVC is
2. Setting up your environment
3. Installing Zend Framework
4. Creating a Project with Zend_Tool
5. Bootstrapping and Configuration
6. Creating Controllers
7. Creating Views
8. Handling Errors
Simple JQuery Image Slide Show with Semi-Transparent Caption
I have tried the code that i get from this site :
http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption
The code about image sliding using Jquery
Here the code :
1. HTML file
<a href=”#” class=”show”>
<img src=”images/flowing-rock.jpg” alt=”Flowing Rock” alt=”" title=”" width=”580″ height=”360″ rel=”<h3>Flowing Rock</h3>You can put html element
inside the REL attribute.”/></a>
</a>
<a href=”#”>
<img src=”images/grass-blades.jpg” alt=”Grass Blades” alt=”" title=”" width=”580″ height=”360″ rel=”<h3>Grass Blades</h3>description”/>
</a>
……
……
……
<div class=”caption”><div class=”content”></div></div>
</div>
<div class=”clear”></div>
2. Here is the CSS file
body{
font-family:arial
}
.clear {
clear:both
}
#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
3. Here is the Javascript file
$(document).ready(function() {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$(‘#gallery a’).css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$(‘#gallery a:first’).css({opacity: 1.0});
//Set the caption background to semi-transparent
$(‘#gallery .caption’).css({opacity: 0.7});
//Resize the width of the caption according to the image width
$(‘#gallery .caption’).css({width: $(‘#gallery a’).find(‘img’).css(‘width’)});
//Get the caption of the first image from REL attribute and display it
$(‘#gallery .content’).html($(‘#gallery a:first’).find(‘img’).attr(‘rel’))
.animate({opacity: 0.7}, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval(‘gallery()’,6000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($(‘#gallery a.show’)? $(‘#gallery a.show’) : $(‘#gallery a:first’));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass(‘caption’))? $(‘#gallery a:first’) :current.next()) : $(‘#gallery a:first’));
//Get next image caption
var caption = next.find(‘img’).attr(‘rel’);
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass(‘show’)
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass(‘show’);
//Set the opacity to 0 and height to 1px
$(‘#gallery .caption’).animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: ’1px’}, { queue:true, duration:300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$(‘#gallery .caption’).animate({opacity: 0.7},100 ).animate({height: ’100px’},500 );
//Display the content
$(‘#gallery .content’).html(caption);
}
And the result is like in http://www.queness.com/resources/html/slideshow/jquery-slideshow.html
MVC
Yesterday I tried one of the PHP framework, It was Code Igniter. May be It’s a little sharing to you all new beginner in Code Igniter. You have to learn about MVC (Models View Crontoller). You can ilustrate it like layer.
1. “View” layer has function in front end where the user interact with the website.
2. “Controller” layer is between “Models” layer and “View” layer. Here we can fill class and functions.
3. “Models” layer is in back end. “Models” will process database request.
Here is the simple flow about how MVC work :
User will interact in view layer, and then every request in View layer will be processed in Controller layer, if there is a database request, Controller interact with Models layer. So the database output from Model will be forward to Controller again and will be represented in View Layer.
That’s I know about MVC so far. If there is something wrong in this posting. Please give me an advice, because I am a new beginner here
