Another version of Simplex Pro - Advance version 2

Here is another version of Simplex Pro template for portfolio or something like that . This template is made as request of reader Tuan in my blog .
He want to remove the first post section and remove the summary text ,keep only image and title .
Here is the screen shot :

Live demo | Download here

This template install instruction is the same to Simplex Pro .
You can get it here

I hope this template helpful to you all .
Enjoy it !
Merry Xmas and Happy newyear ,my friends ^^

Simplex Pro - Advance version

One man asked me re-design this template for his blog ,he want to applied a slideshow at the top ,headline at the top-left and 4 columns at the footer .
So it's the reason why I made this one ,you can take a look at screenshot :

here is the page layout :


Live demo | Download

I added to this version a slideshow ,and a headline corner at the top ,4 columns at the bottom . All of them can add or remove easily as you see in page layout . There are many place for adding widget and advertisements .
Now this is instruction for installing this template
1,Download it

2,Extract it ,you will get a template file in xml format and a folder of images . Upload all image to hosting .

3,Open template file :

3a,change the url of images in your template to your images url .
3b,Find this script :

In this script there are some variables :numposts is the number of post in recent post section,numheadline is the number of headline in the top-left ,numfeature is the number of post in slideshow section , headlinelabel is the label of posts in headline section , if you want to show post under specific label in headline section ,just change the value blogger to label you want. The same is to featurelabel .
home_page is the home page of your blog ,change it to your blog url .Remember to adding a slash at the end .
Save template .

4,Upload template to blogger .

5,To set up other element such as navigation bar ,logo ... you can see in my previous instruction on how to install Simplex Pro template .

6,You can add widget as you want in this template to expand its function .

7,Save ! and you are done .

The erotic photo-art. Lars Deike.

The art-works of German photographer Lars Deike. Color photos of nude guys and men.


















































































































































Website: http://www.deike.de/

The erotic photo-art. Lars Deike.

The art-works of German photographer Lars Deike. Black-and-white photos of nude guys and men. In studio and outdoor.

















































































































































































Website: http://www.deike.de/

The art-works by Wojtek Siudmak.

Man's characters in painting Polish artist Wojtek Siudmak /lives in France/. Nude men in the surrealistic and fantastic worlds.



















































































































































Website: http://www.siudmak.com/

Another slideshow using Jquery Scrollable plugin

Did you see my previous posts on making a slideshow for blogspot ? Now I want to show you another plugin which has the same functions . With this plugin ,you can make a complete slideshow ,which can scroll in both of vertical and horizontal .
here is the screenshot :


Live demo

Here is the instruction :
To add an element to your blog ,you can insert it to Template file directly or insert in a HTML/Javascript widget . I personally insert into template file ,but I think use a widget is very useful because you don't need to encode the script and you can remove the script any time you want easily .
Now ,create a HTML /Javascript widget . Here is the HTML structure of this slideshow :

<!-- main navigator -->
<ul id="main_navi">

<li>[thumbnail #1]</li>
<li>[thumbnail #2]</li>
<li>[thumbnail #3]</li>
</ul>

<!-- root element for the main scrollable -->
<div id="main">

<!-- root element for pages -->
<div id="pages">

<!-- page #1 -->
<div class="page">

<!-- sub navigator #1 -->
<div class="navi"></div>

<!-- inner scrollable #1 -->
<div class="scrollable">

<!-- root element for scrollable items -->
<div class="items">

<!-- items on the first page -->
<div class="item"> [The Content] </div>
<div class="item"> [The Content] </div>
<div class="item"> [The Content] </div>

</div>

</div>

</div>

<!-- sub navigator #1 -->
<div class="navi"></div>

<!-- page #2 -->
<div class="page">
...

</div>

</div>

</div>
main navigator is the navigation on the left side .
sub navigator is small button on the top .
each page element in the code is controlled by an element in main navigator ,and each item in page element is controlled by sub navigator .
You can add as many and item as you want .
From the script ,you can see the elements of slideshow code .To display them as you want ,you can add CSS code for formatting these elements .
Basic CSS code here .

<style>

/* main vertical scroll */ 
#main { 
    position:relative; 
    overflow:hidden; 
    height: 450px; 
} 
 
/* root element for pages */ 
#pages { 
    position:absolute; 
    height:20000em; 
} 
/* root element for horizontal scrollables */ 
.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 510px; 
    height: 450px; 
} 
 
/* root element for scrollable items */ 
.scrollable .items { 
    width:20000em; 
    position:absolute; 
    clear:both; 
}
</style>

You can write more CSS code for other elements . This is the basic one .

You got a slideshow in HTML ,and now is the time we make it operate by adding javascript code. After CSS code ,add this code

<script type="text/javascript" src="http://dinhquanghuy.110mb.com/metal/jquery.js"></script>
<script type="text/javascript">
// main vertical scroll
$("#main").scrollable({

// basic settings
vertical: true,
size: 1,
clickable: false,

// up/down keys will always control this scrollable
keyboard: 'static',

// assign left/right keys to the actively viewed scrollable
onSeek: function(event, i) {
horizontal.scrollable(i).focus();
}

// main navigator (thumbnail images)
}).navigator("#main_navi");

// horizontal scrollables. each one is circular and has its own navigator instance
var horizontal = $(".scrollable").scrollable({size: 1}).circular().navigator(".navi");


// when page loads setup keyboard focus on the first horzontal scrollable
horizontal.eq(0).scrollable().focus();
</script>

After adding this script ,you can save your widget and see the result .
In this script ,instead of jquery and scrollable plugin , they packed them into one file name jquery ,so adding <script type="text/javascript" src="http://dinhquanghuy.110mb.com/metal/jquery.js"></script>
is enough . You can download js file at this address to know more .

Save template and see the result .
If you want to know more about the code ,or don't want to write the code from the beginning ,you can go to my live demo and save it to computer . Open it ,see how it work ,and copy ,paste . I think it's easier than coding from A to Z .
Hope you like this ! Enjoy it !

30 Awesome Jquery Plugins for better web interface

Here is the list of useful Jquery Plugin .They can help you make a better web design . I hope this list helpful to you

Easy Slider 1.7 – Numeric Navigation jQuery Slider

As its name ,easy to install and use .

Agile Carousel

Jquery plugin that allows you to easily create a custom carousel.Many options for different transitions .

Sliding Boxes and Captions with jQuery

One man asked me for make a caption or title of image sliding up when mouse over and down when mouse out .And here is the plugin for him .

AnythingSlider jQuery Plugin

AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. I don't use this slider in my template but in my opinion ,it's a good one .

Creating a Slick Auto-Playing Featured Content Slider

In my previous blog post ,I talked about how I made slider for Simplex Darkness template . And here is another slider with content . You can use this one and still get the same result like Simplex Darkness template .

How to Make a Threadless Style T-Shirt Gallery

This plugin is very useful for saving space in your site . In the demo version ,they use this plugin for T-Shirt gallery ,but you can use them with images on blog ,start with thumbnails and show the full images when mouse over .

Create a gallery by using z-index and jQuery

Interesting gallery plugin . But I think it's only suitable for personal blog .

Create an Image Rotator with Description

Another solution for any one who want to make a slider in web . If you feel the instruction I wrote to create a slider so complicated and hard to follow ,you can take an eye at this one .

ImageSwitch

The main point of this plug-in is to make an easy-to-use, simple and fast plug-in to create effect when you switch between images. Minimize the arguments you need to input and still give some decent effects.

CrossSlide

At the first time I saw the demo of this plugin ,I think it created by Flash . In fact,it is really a product of Jquery . This is a great solution for creating dynamic effects fx. in a header.You simply have to see the effect for yourself demo here.

Highslide JS

Highslide JS is an open source image, media and gallery viewer written in JavaScript. Integrate it into a page and you have a gallery for your blog .

JQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

Easiest Tooltip and Image Preview Using jQuery

You can place thumbnail in your blog posts and use this plugin for showing full image when mouse over . A good solution for saving web page space .

jQuery spherical panorama viewer

A javascript viewer for displaying spherical panoramas. An alternative to Java and QuickTime technology. To use this plugin you need to generate views from your spherical panoramic image. You can download and install MPRemap from Helmut Dersch website for this purpose. I think it's very good for real estate agent websites because buyer can easily imagine the house they will buy with this plugin .

prettyPhoto a jQuery lightbox clone

jQuery lightbox style script that support images, galleries, flash, qtime, iframe etc.

jQuery virtual tour

This virtual tour plugin has the particularity to be accessible and can run even if javascript has not been activated.

Step Carousel Viewer

jQuery Cycle plugin

A greate plugin !

Fancy Box

FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page. Automatically scales large images to fit in window, adds a nice drop shadow under the full-size image, image sets to group related images and navigate through them. Also support media.

Jcrop

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

AnythingZoomer jQuery Plugin

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there. Demo & Download

ImgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.

PanView

This plugin allows your visitors view details of a big image and move around with the mouse.

s3 Slider

This is an easy way to add a good looking image slideshows with text flyin to your website.

Lightbox Plus

Another Lightbox style plugin

Shadowbox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page. Can run alone but also has an adapter for jQuery and other frameworks.

Image Cross Fade Transition

Scrollable

Scrollable is useful jQuery plug-in for creating scrollable content.

jQuery Infinite Carousel

Image Loading

This tutorial will show how to load images in the background, and once loaded handle the event and create your own response. Try Demo | View Code

Creating a polaroid photo viewer with CSS3 and jQuery

A good gallery plugin ,you can drag the images . But I'm not sure this one is quite good in all browsers . CSS3 is not supported in old version of browsers .