Images and sliders

  1. Shortcodes
  2. Images and sliders

Parallax

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

[full_width]
[parallax imgsrc="..."]
...
[/parallax]
[/full_width]
parameters
  • ratio - speed to move relative to vertical scroll. example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
  • overlay - in %
  • overlay_image - overlay image - false; true;
  • imgsrc - image
  • size - breadcrumbs, show breadcrumbs path? - big; small;
  • mainheader - parallax is above menu? - no; yes;
  • SUPERB DESIGN
  • PERFECT PIXELS

Flexslider 

[flex_slider]
[flex_slider_item imgsrc="..."]...
[/flex_slider_item] 
[/flex_slider]

flex_slider parameters
  • animation - animation type - slide; fade;
flex_slider_item parameters
  • imgsrc - image source
  • link - direct movie link .if you don't put the image source on slide will be show video
  • alt - alternative text for image

Gallery slider 

[gallery_slider]
[gallery_slider_item imgsrc="..."]
[/gallery_slider_item] 
[/gallery_slider]

gallery_slider parameters
  • effect - slider effect - slide; fade;
gallery_slider_item parameters
  • imgsrc - source, image
  • link - link from image

Ken Burns Slider 

[ken_burns_slider]
[ken_burns_slider_item 
tags="Idea,Design" 
imgsrc="/wp-content/uploads/2014/02/full-slider10.jpg" l
ink="http://themeforest.net/item/boston-corporate-parallax-html-template/6571285?ref=createit-pl" buttontext="Purchase Boston" 
link2="#"
buttontext2="Take The Tour"] 
WE ARE AWESOME [/ken_burns_slider_item]
...
[/ken_burns_slider]

Logo slider 


[logo_slider]
[logo_slider_item imgsrc="..."] 
...
[logo_slider_item imgsrc="..."] 
[/logo_slider]

logo_slider parameters
  • itemwidth - single logo container width
  • minitems - minimum items, minimum number of items that should be visible
  • move - move items, number of items that should move on animation. if 0, slider will move all visible items.
logo_slider_item parameters
  • link - ex. http://www.google.com
  • imgsrc - image source
  • alt - alternative text for image

Slogan slider

TRUST US

WE ARE

DESIGNERS 


[slogan_slider 
header1="TRUST US" 
header2="WE ARE" 
header3="DESIGNERS "]
[slogan_slider_item imgsrc="/wp-content/uploads/2014/02/full-slider7.jpg"] ...[/slogan_slider]

slogan_slider parameters
  • itemwidth - single logo container width
  • minitems - minimum items, minimum number of items that should be visible
  • move - move items, number of items that should move on animation. if 0, slider will move all visible items.
slogan_slider_item parameters
  • link - ex. http://www.google.com
  • imgsrc - image source
  • alt - alternative text for image

Video slider

  • Outstanding User Experience
  • Optimized information placement
  • We are using the latest technology 

[video_slider 
link="//player.vimeo.com/video/40123818?title=0&portrait=0&color=df5840&autoplay=1&loop=1"]
[video_slider_item]Outstanding User Experience[/video_slider_item]
...
[/video_slider]

video_slider parameters
  • itemwidth - single logo container width
  • minitems - minimum items, minimum number of items that should be visible
  • move - move items, number of items that should move on animation. if 0, slider will move all visible items.
video_slider_item parameters
  • link - ex. http://www.google.com
  • imgsrc - image source
  • alt - alternative text for image

Images

Overlay 

[img src="..." align="default"]
parameters
  • src - image, image source
  • alt - alternate text
  • width - image width
  • height - image height
  • align - image align - default; left; center; right;
  • overlay - color; lightbox;
  • greyscale - yes; no;
  • link - ex. http://www.google.com
  • class - image class
  • animation_speed - animation speed, in miliseconds ex. 2000 is 2 seconds
  • animation - animate this element once it becomes visible. supported animations: https://daneden.me/animate/
Back to top