Code Monkey home page Code Monkey logo

landing-page's Introduction

landing-page

The 'landing-page-plugin' is a very simple image slider built with jQuery. See the steps below for the installation. There are also several options to customize the slider. See also my Demo of the slider.

Installation

  • Download and unzip the latest version of the plugin

  • Include the latest version of jQuery (see Google Developers for cdn-version)

  • Include the CSS-Stylesheet file and the JavaScript file of the landing-page in the header of your HTML-file:

<link rel="stylesheet" type="text/css" href="landing-page/landing.min.css">
<script type="text/javascript" src="landing-page/landing.min.js"></script>
  • Prepare a simple HTML element (such as a div tag) with an id #landing and the attributes data-title and data-subtitle:
<div id="landing" data-title="Pascal Iske" data-subtitle="Frontend and Web Developement"></div>

The plugin includes itself in the prepared div element. Other types of HTML tags such as section, header, etc are also possible. You can style this element with your own css.

  • Include the following Javascript and replace #landing with the id of the element you've prepared in the previous step and #wrapper with the container of your site. This container is needed for fade in after the landing element is removed! So if you don't have an container around your site please make on.

Attention: The landing #element must not be inside this container!

$(document).ready(function() {
	$("#landing").landing({
		wrapper: '#wrapper'
	});
});

Don't forget the <script> tag around the Javascript code! ;)

I recommend to include this Javascript code at the bottom of the file just before the closing body tag because of performance reasons.

If you're not sure, look at my Demo.

Configuration

This plugin has a few options. These options are listed below with a short description. Between the {braces} are the possible values for the options.

// if a logo is visible (logo file should be defined as value)
logo: 'http://pascal-iske.de/landing/logo.svg',
//locks background
lock: true,
//redirect callback
redirect: false,
//redirect url/path
redirectTo: ['path', 'home/'],
// removes element callback
remove: true,
// effect
effect: 'slide'

You have to write (or copy) the options into the JavaScript code from the last step of the Installation. For every option write a new line and don't forget the comma at the end of each line (except the last line).

...
$("#landing").landing({
	option_name: value,
	option_name: value,
	option_name: value,
	...
});
...

Contact

If you have questions, suggestions or feature requests you can write a pull request to this repo or you can contact me with this Email: [email protected].

License

This jQuery plugin is made with lots of love and its free of charge so you can use it on your website. Please fork this repo for your own changes. In general I would like to see my name in the credits. Thank you!

landing-page's People

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.