Oi! This site is currently in WIREFRAME mode, flick a switch for full site. To see this site in WIREFRAME mode, click the switch.
EL SAMPO Digital.

Javascript and CSS projects.

Projects done during the years. All available at TheSamp@Github.

sampSlider

jQuery plug-in, with a nifty little controller dot. Optimised for touch devices and is fully responsive. If you ask me, all the sliders in the internet should be like this one :). Cool controller indicator which won't be hidden under the finger when using the controller dot.

Default settings:

autosize: true,
width: 900,
height: 600, (Quite pointless setting as it height is calculated from width with aspectratio)
aspectratio: false, (Overrides autosize. If false it is calculated.)
autoplay: 0, (0 for no autoplay or delay in milliseconds)
dragonbar:false, (true to show drag-navigation)
arrows:true, (Show arrows)
loop: true, //Boolean, infinite loop
slidespeed: 500,
startslide: 1,// 1 and up
gototop: false, //boolean, if automatically scroll to top of slider
afterinit: call back function

Example configuration

Running example below.

var slida = jQuery('#ss-projects').sampSlider({
    aspectratio:1.8,
    autosize: true,
    autoplay: 4000,
    slidespeed: 500,
    dragonbar: true,
    startslide: 1
});
  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5
  • Image 6

sampGallery

jQuery plug-in. Not really a gallery, simply an image viewer.

Default settings:

scrolltoitem: true, (Scroll page to opened image)
scrolloffset: {top:0}, (if needed to add top offset for example when having a fixed header)
animationspeed: 1000, (Scroll speed)
thumbscaled: true, (Use thumbs as background-images and scale them.)
afterinit: callback function after gallery is built.

Example configuration

Running example below.

jQuery('#sg-projects').sampGallery();
Image 1 Image 2 Image 3 Image 4 Image 5 Image 6 Image 7 Image 8

sampIcons

CSS/PNG icon system. Using a sprite.

  • CSS
  • SCSS
  • HTML
  • Adobe Illustrator
  • Git
  • PNG
  • Sprite

sampGrid

Ever needed just a simple CSS grid, something that doesn't include margins and paddings and other bloated stuff? Here you go. Just a grid without bells and whistles..

  • Grid
  • CSS
  • SCSS
  • HTML
  • CSS
  • SCSS
  • HTML
  • Adobe Illustrator
  • Git
  • PNG
  • Sprite
  • Grid
  • CSS
  • SCSS
  • HTML

sampCookie

Customisable cookie consent script.

  • Cookie
  • Consent
  • CSS
  • SCSS
  • HTML
  • Javascript
  • Git

sampElements

Prestyled CSS element collection for easy prototyping in browser.

  • CSS
  • SCSS
  • HTML
  • Git
  • Cookie
  • Consent
  • CSS
  • SCSS
  • HTML
  • Javascript
  • Git
  • CSS
  • SCSS
  • HTML
  • Git