This is an old revision of the document!


Camera Slider PRO

Here are some examples what you can do with the PRO Version:
Of course it's possible to

  • make your slider respond to screen sizes
  • or make it fixed in size

But the really cool things are these:

  • position your captions
  • style your captions
  • change widths and heights
  • add one or more css classes
  • throw in some {SHOW_CONTENT:CP,ID,ID}
  • Add content that is by far much longer than your defined slider height and get nice scrollers

Not enough, that you can do this - it's even possible to do it with every single slide - in a different manner!

Have a look at the backend

And this could be some CSS

.no_1

.no_1 {
  background:#000;
  background-position:fixed;
  padding: 0 5px;
  width:50%;
  left:3%;
  bottom:3%;
  position:absolute;
  height:auto;
  opacity:.7;
  border:4px solid #fff;
}
.no_1 a:link,
.no_1 a:visited,
.no_1 a:hover,
.no_1 a:active{
  background-color: #AD000B;
  color: #fff;
  padding:0 3px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  text-decoration: none;
  font-weight:bold;
}

to make it look something like this:


Now some show_content

and all images are clickable! You saw that nice scroller? Content bigger than the original image area isn't out of sight.

Endless possibilities

Promised!

Let The Captions Fly

It is even possible to animate your captions so the can fly in, tumble out or whatever. Just a little CSS and you are done:
plus

.divround{
  background:#aaa;
  position:relative;
  left:50%;
  margin-left:-50px;
  width:100px;
  height:100px;
  border-radius:50%;
}
 
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
 
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
 
@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
 
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}
 
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
Copyright (c) 2014 Daniel Eden
*/
 
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
3rd-party-modules/sliderjs/sliderjs_pro/camera_slider_pro.1408369547.txt.gz · Last modified: 2018/06/03 18:06 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0