PHP

Chapter 2 Survey and Fundamentals

A. HTML5 <datalist> Element

2.6 Used Web Technology’s

2.6.5 PHP

PHP is a powerful tool for making dynamic and interactive Web pages. PHP is the widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.

PHP is an open source general-purpose server-side scripting language originally designed for Web development to produce dynamic Web pages. It is one of the first developed server-side scripting languages to be embedded into an HTML source document rather than calling an external file to process data.

The code is interpreted by a Web server with a PHP processor module which generates the resulting Web page. It also has evolved to include a command-line interface capability and can be used in standalone graphical applications. PHP can be deployed on most Web servers and also as a standalone shell on almost every operating system and platform, free of charge. A competitor to Microsoft's Active Server Pages (ASP) server-side script engine and similar languages, PHP is installed on more than 20 million Web sites and 1 million Web servers. Software that uses PHP includes Drupal, Joomla, MediaWiki, and Wordpress.

PHP was originally created by Rasmus Lerdorf in 1995. The main implementation of PHP is now produced by the PHP Group and serves as the formal reference to the PHP language. PHP is free software released under the PHP License, which is incompatible with the GNU General Public License (GPL) due to restrictions on the usage of the term PHP.

Chapter 3 HTML 5 Image Gallery Design

HTML5 Features on Website

HTML5 can be used to create cool sites and features.

By using Image Gallery CSS Advanced technology I have created a web pages of Indian Freedom fighter leaders. I choosed 20 Indian Freedom Fighters Biography and their Images.

3.1 Layout of Image gallery

This is final layout for demos, below figure 3.1 shows layout. I have split website home page into sections like Introduction, news items, and contact information. For I click on Home section it will show Demos list so for this I use HTML 5 tag, the <li> tag is supported in some major browsers.

For News section, if I click on News section it will show Introduction. so for this I use HTML 5 tag, The <li> tag is supported in all major browsers.

For About section, if I click on About section it will show Introduction. so for this I use HTML 5 tag, The <li> tag is supported in all major browsers.

<li><center><a href="About.html">About</a></center></li>

For Contact section, if I click on Contact section it will show Contact information, so for this I use HTML 5 tag , The <li> tag is supported in all major browsers .

<li><center><a href="Contact.html">Contact</a></center></li>

For Reference section, if I click on Contact section it will show Contact information, so for this I use HTML 5 tag. The <li> tag is supported in all major browsers.

<li><center><a href="References.html">References</a></center></li>

Figures

Function:

<td><a href="http://140.122.184.44/html5/"><img src="1.jpg" alt="1"

height="200" width="200"> </td>

Here for each image I take the height is 200 and width is 200

The <td> tag is supported in all major browsers.

When I click on each image then it will shows the implemented features of the HTML5 and CSS3.

Figure 3.1 multimedia design

A. Demo of CSS3 Image Gallery

CSS can be used to create a neat an image gallery. Image Gallery

The following figure 3.1.1 demonstrates about image gallery is created with CSS:

Example of CSS3 Image gallery:

Figure 3.1.1 CSS3 Image Gallery

Function:

<img src="Indira Gandhi_small.jpg" alt="Indira Gandhi" width="110"

height="90">

B. Demo of Frame

The figure 3.1.2 defines example of frame image. By using Left Frame I created Indian freedom fighters list in left corner. When I click on the name it will shows the leader name, image on the left and biography of the person.

Function:

<img border="0" src="Bipin Chandra paul.jpg" alt="Bipin Chadra paul"

width="304" height="228" />

Example of Frame Image:

Fig 3.1.2 Frame Image

3.2 Demo of Triple Panel Image Slider

Demo description:

I got this idea from Tympanus.net. tutorials [7] . The figure 3.2 indicates Triple panel image Slideshow example. I used 20 images to create a Triple panel jQuery image slider with a 3D look and swipe-like transitions.

I created a jQuery triple panel image slider with a 3D look. The idea is to have a main panel and two lateral panels that are rotated slightly in 3D space. When navigating, I will slide in the respective next image in each panel. I am using CSS 3D Transforms with perspective and CSS Transitions.

I have given a Indian Freedom fighters 20 images in the demo.

Function:

HTML5:

Ex:

Ex: Triple panel Image slider demo:

Fig. 3.2 Triple Panel Image Slider

Markup:

The initial structure that we’ll create will consist of a division with figures.

Each figure will contain an image and a figcaption for the image:

I use that technology jquery plugin to transform that structure.

Each figure will be wrapped into a division with the class fs-block and I have added a navigation to the whole thing.

CSS:

Since I want the image slider to be responsive, I will give it a percentage width.

But I am also define a minimal and maximum width so that it doesn’t squeeze too much or grow out of proportion. I will add some paddings to the side because blocks will be positioned using the CSS translate property and that will not affect the width of the element.

.fs-container

I add a realistic shadow under the slider using a pseudo-element. I will use a background image for that and setting a background size of 100% will ensure that the shadow resizes with our slider.

background: transparent url(../images/shadow.png) no-repeat center center;

The additional wrapper that I have added around the slider will have perspective:

.fs-wrapper

The slider itself will need to have the preserve 3d transform-style:

fs-slider

transform-style: preserve-3d;

.fs-block, Each block will be placed in the center by setting the width to 70%

and the left value to 15%. I will also add a transition to the block since I want to create a neat hover effect:

transition: all 1s ease;

Now I need to position the blocks. The first one will be moved to the left by setting the translateX value to -100%. By rotating it -35 degrees on the Y-axis, I will make it turn away to the back on the left side:

transform: translateX(-100%) rotateY(-35deg);

On hover, I want that panel block to move a bit to the front. I am using Modernizr, so I can define the hover effect only for non-touch devices (the body will have the class “no-touch”).

.no-touch .fs-block:nth-child(1):hover

The middle panel will have a z-index of 100(z-index: 100) because I want to ensure that it’s always on top. The last block will be moved right and rotated to the other side. And on hover I will slightly move it to the front.

I add some semi-transparent overlays to the panels in order to make them look more realistic. I will use the pseudo-class :after for that and I will make it overflow 1px (to fix a little gap that might show up because of rounding errors of the width):

Each block will have a different type of gradient. linear-gradient

The following gradient for the middle panel will add a slightly bended effect:

.fs-block:nth-child(2):after { opacity: 0.8;

background:

The last block will have the reverse gradient of the first one.

Now, I style the figure elements. They will be positioned absolutely( position:

absolute;) and fill all the block element.

The idea is to add another figure to a block when navigate. So I need to set the z-index( z-index: 10;) of the first figure higher so that the added figure does not show up. Then I will animate the width of the first figure to 0%, which will reveal the second one. Then The image will also be set to position absolute:(position: absolute).

The figcation element will have a semi-transparent background and I will add a transition. This transition will happen when I add the class fs-transition to it (I will do that when I navigate):

.fs-block figcaption.fs-transition

Then I style the text elements. The navigation will be placed in the bottom right corner. The spans will be used as the navigation arrows and they will be floating left and I will add the arrow as a background image. The second span will be rotated to 180deg, so that the arrow points to the right. On hover I will increase the opacity.

Now, I add the transitions for the sliding effect. Each panel will have a different delay. Since I always want to animate a kind of swipe from the right, the first panel will have the highest delay. On the other hand, the third one will have no delay. The timing-function will be a custom cubic-bezier.

.fs-block:nth-child(1) figure {

transition: width 900ms cubic-bezier(0, 0, .15, 1) 600ms;

}

.fs-block:nth-child(2) figure {

transition: width 900ms cubic-bezier(0, 0, .15, 1) 300ms;

}

.fs-block:nth-child(3) figure {

transition: width 900ms cubic-bezier(0, 0, .15, 1);

}

At last I add some media queries for adjusting the size of the text elements.

The above procedure is about the style.

javaScript:

The plugin options will only have the autoplay settings. I have set the transitions configuration in the CSS.

I will start by preloading all the images and once that’s done I will execute the _init function:

_init : function( options )

I am basically caching some elements and initializing some variables to be used later. If I have more than three items or images, I will build the structure mentioned before. I also set the window resize event.

Finally, if the autoplay option is set to true, I trigger the auto slideshow.

The _layout function will make sure that the first three items will be the ones visible in our 3d structure. All the initial items will be hidden and wrapped in the fs-temp division.

I also need to resize each image according to its wrapper size. The main item’s description (the middle item) is shown while all the others stay hidden. Last, I create the navigation buttons and initialize their events, if I have more than three items.

Function:

The _navigate function takes control of which items will be positioned in the three visible blocks. I insert each of these item’s figure inside the block, resize the new images, and animate the width property of that same current block’s figure to 0px. In the end, I remove it leaving the new figure in its place. Also, I keep showing the middle block’s description while hiding all the others. This and also updating the current variable is done in the _slideEnd function:

The last thing I need to take care is when the user resizes the window. I need to resize the visible block images accordingly. This is also done once _layout is called.

3.3 Demo of Rotating Slideshow on Images Demo Description:

The figure 3.3 and figure 3.3.1 demonstrates rotating Slideshow on images. I have to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. I can use it to spice up web sites, product pages and other projects with some CSS3 magic.

I used all the 20 Indian Freedom Fighter Images.

Function:

HTML5:

I will first lay down the HTML markup of the slideshow. The main container element is the #slideShowContainer div, which holds the #slideShow div and the previous / next links (turned into arrows with CSS).

I use HTML 5. The <li> tag is supported in all major browsers.

The slides are defined as LI elements inside of an unordered list. That the width of the images is set to 100%. This way It will scale according to the width of the #slideShow div.

I include the jQuery library, our own script.js file, and the jQuery rotate plugin.

I am using the plugin, so I can work with CSS3 rotations in a cross-browser fashion.

CSS:

Although the #slideShow div is set to a width of 490px, its full size is actually 510px. This 20px difference scales down the slide images (as they are locked to the width of the #slideShow div), which are reduced from their normal size of 480px down to 460px. In the next step, I am using a jQuery animation to zoom in the slideshow to its full size. This way, even at full zoom, the images are actually at their regular size and there is no loss of quality.

Ex: jQuery CSS3 Rotating Slideshow:

Fig. 3.3 Rotating Slideshow

Fig. 3.3.1 Rotating Slideshow

JQuery

Although most modern browsers support CSS3 rotation, it is still rather tedious to work with the various vendor-specific properties. Luckily, there are plugins available that handle the cross-browser nonsense for us. I choose the jQuery rotate plugin, as it also integrates perfectly with the animate() and css() methods of the library, which means I can easily animate the rotation of elements. As I will see in a moment, I am using this in our custom rotateContainer event, which rotates the #slideShow div.

I am using jQuery’s support object to test whether the visitor’s browser supports CSS3 transformations. I am only going to display the rotation in browsers with transformation support, like the newer versions of Firefox, Google Chrome, Safari and Opera, while falling back to a plain fade in/out version of the slideshow in the rest.

Internet Explorer does provide a solution for rotating elements via its proprietary filter syntax, but it can’t handle the technique I am using for this slideshow. So, in effect, going to see a working slideshow in any browser.

showNext and showPrevious are what I am using to control the slideshow.

These in turn execute the rotate Container event, and pass the direction and degrees as parameters.

By using jQuery I created a pretty slideshow, with which I can show case my images and add a bit of interactivity to my pages.

Javascript:

In this case, I also define the same showNext and showPrevious events, but here they just fade in / out the images, without starting a rotation.

The updateZindex() function is important, as otherwise the slides would be displayed in reverse order. This function loops through the elements in the order they currently are, and assigns a z-index property, so they are displayed correctly.

updateZindex();

3.4 Demo of JQuery lightBox plugin Demo description:

I got this idea from leandrovieira.com [8]. The figure. 3.4, figure 3.4.1 and figure 3.4.2 are describes a jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector. For this demo I used five Images of Indian freedom fighters.

Function:

$(function() {

$('#gallery a').lightBox({fixedNavigation:true});

Summary:

Setup

jQuery lightBox plugin uses the jQuery JavaScript library, only. So, including just these two javascript files in the header.

Including the CSS file responsible to style the jQuery lightBox plugin.

media="screen" />

To make Active: There is no need to modify HTML markup to use jQuery lightBox plugin. I have used the power and flexibility of jQuery´s selector and created a set of related images.

To declare the thumb image, HTML markup function is

<a href="image1.jpg"><img src="thumb_image1.jpg" width="72"

height="72" alt="" /></a>

I take the Image height as 72 and width as 72.

After it, I select the links and call the jQuery lightBox plugin.

To select lightbox the function is:

$(function() {

$('a[@rel*=lightbox]').lightBox();

for select all links that contains lightbox in the attribute rel

$('#gallery a').lightBox();

for select all links in object with gallery ID

$('a.lightbox').lightBox();

for select all links with lightbox class

$('a').lightBox();

for select all links in the page

Then the possibility are many. Used creative or choose one in the examples above.

jQuery lightBox plugin image Example 1:

Fig: 3.4 jQuery lightBox image

jQuery lightBox plugin image Example 2:

Fig: 3.4.1 jQuery lightBox plugin image

jQuery lightBox plugin image Example 3:

Fig: 3.4.2 jQuery lightBox plugin Image

3.5 Demo of Image Wall with jQuery and CSS

Demo description:

I got this Image Wall with jQuery and CSS from templatemonster.com. [9].

The figure 3.5, figure 3.5.1 & figure 3.5.2 Shows about the Image wall with jQuery and CSS. I created a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when I click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

To scatter the images I use the CSS3 child selector property and the jQuery Masonry plugin by David DeSandro.

I took the images of Indian Freedom Fighters Gallery. Which I have collected.

Markup:

The HTML structure is pretty straightforward: I will have a wrapper for unordered list of images and a ribbon element where I will add a closing span and a help text span. and to have a width that will adapt to the window size, so I give it a width of 70%.

Since I am using the Masonry Plugin to minimizes vertical gaps between the images and have a neat repositioning animation when I i.e. resize the window.

Next, I defined the style for the list elements. (I am assuming that including some sort of reset css that will set the margins and paddings of unordered lists to 0).

By default all the list elements to have a margin of 5px and to float:

ul.iw_thumbs li{

float:left;

margin:5px;

}

The description will be placed absolutely and in javaScript function I decided the left positioning (either it will be -200px in order to be shown left to the image or the width of the image in order to be shown to the right).

Then I style the heading and the text. The images will have a thick white border and some box shadow. I add some chaos to the list elements and the images. I adjust the margin of some list elements by selecting specific children.

I take the first list element and I add a margin-left of 50 px. I have taken all the even list elements and give them a different top margin. All multiples of three

在文檔中基於內容的ＨＴＭＬ5對網站的圖片庫 (頁 26-0)

Chapter 2 Survey and Fundamentals

A. HTML5 &lt;datalist&gt; Element

2.6 Used Web Technology’s

2.6.5 PHP

Chapter 3

HTML 5 Image Gallery Design

A. HTML5 <datalist> Element