Outdoor

Creative Responsive Photography / Portfolio Template

• Created: 29/09/2015
• latest Update: 29/09/2015
• By: KWST
• Email: support@kwst.net

Thanks for purchasing tempalte and for supporting my work. Outdoor - Creative Responsive Photography / Portfolio Template . This documentation will not teach you HTML & CSS, it's just showcase of custom elements used in template. . Also included in the archive selection page version. It is located in the folder "intro" .

Very important ! In order to work php scripts (contact form) and video background - your site files must reside on the local host or server. And the font style used in the template does not support Cyrillic

Files

All site files are divided into folders:

css folder - css files that are responsible for the style themes.
js folder - javascript files.
php folder - php files.
images folder - folder that contains all images.
fonts folder - folder that contains fonts plugin "Font-Awesome".

Classes and structure

Structure

Header - It contains - logo, navigation and the button "Share" .

	
            

                
                

                    
                    

                        
                    
                    
                    
                    

                        

                    
                    
Share
                    

                        
                    
                    
                
                	
            
            

All content is between the tags

           		
            

                
                

				
					
					Content here 
				
				
				
			

Footer - It is - social links, the top button

Images

All images are in the folder "images".

How to add and change the background image

To change the background you can simply change the path in the style rendered in html code, for example :

Icons

All icons are generated by the plugin "Font-Awesome". List of all the icons can be found here.
To change the icon, you have to copy and paste the code icon at the right place for you. Icons size-five . Read the documentation plugin - it is described in detail how to change the icons size.

For example:

Portfolio

Filters portfolio - To filter worked - class links in the code must conform to the class of the filter element, for example:

                            

                                All Albums
                                People
                                Nature
                                Comercial
                                Travel
                            

                                                                        
                                    

                                        
                                        

                                            

                                                

                                                

                                                    
Quisque non augue
                                                    Travel
                                                
                                            
                                        
                                        

                                            

                                                
Quisque non augue
                                                Travel / Photography
                                            
                                        
                                    
                                    

In this case, when you click on the link with the class "comercial" will be displayed elements with class "comercial"

Contact Form

Find the file "contact_me" in the folder php . In this file, find the line $to_Email = "myemail@gmail.com"; and add you e-mail.

How to forward mail to your mailbox ask your Hosting Service Provider. Because providers use different control panel site and I find it hard to predict what you use. Server side script for sending emails is in "contact_me.php" . Ajax submit is initialized in "scripts.js" file.

    $("#contactform").submit(function() {
        var a = $(this).attr("action");
        $("#message").slideUp(750, function() {
            $("#message").hide();
            $("#submit").attr("disabled", "disabled");
            $.post(a, {
                name: $("#name").val(),
                email: $("#email").val(),
                comments: $("#comments").val()
            }, function(a) {
                document.getElementById("message").innerHTML = a;
                $("#message").slideDown("slow");
                $("#submit").removeAttr("disabled");
                if (null != a.match("success")) $("#contactform").slideDown("slow");
            });
        });
        return false;
    });
    $("#contactform input, #contactform textarea").keyup(function() {
        $("#message").slideUp(1500);
    });

Video

This template uses Youtube video as background . To add your video in html file find line :

add you video id in data-vid="" if you want add sound change data-mv="1" on data-mv="0"

And yet the video does not play on smartphones :( - so if a user comes to your site from a mobile browser - the background is replaced by a picture :)

Share your pages

To configure the plugin in each html find line :

You can simply add a comma in line: social: 'facebook','pinterest','googleplus','twitter','linkedin' 'foursquare' , 'flickr', 'digg' , 'tumblr', 'vimeo' , 'stumbleupon' separated names of social networks . On any page, you can add any option sets share buttons for social networking

Map

To configure the map in file map.js find code :

 		
			// markers and locations------------------
            values: [ {
                latLng: [ 40.7143528, -74.0059731 ],
                data: "Our office  - New York City",
                options: {
                    icon: "images/marker.png"
                }
            } ],	

And add your own values latLng: [ 40.7143528, -74.0059731 ] latitude and longitude , data = Description in the pop-up window . To find the coordinates - visit this link

Next step you need api key . To find key visit this link . And add your key in each page in code :

Sources & Credits

Images
https://www.behance.net/
http://www.janericeuler.com/

Icons
Font-Awesome
http://fortawesome.github.io/Font-Awesome/

Javascripts

JQuery
http://jquery.com

JQuery Easing
http://gsgd.co.uk/sandbox/jquery/easing/

Owlcarousel
http://www.owlcarousel.owlgraphic.com/

isotope
http://isotope.metafizzy.co/

Magnific Popup
http://dimsemenov.com/plugins/magnific-popup/

Thanks

Thanks for purchasing template and for supporting my work. If we fail here in this documentation, please e-mail me support@kwst.net. If you have a spare time, please go and rate my template. I will apreciate that.

Thanks