{"id":89,"date":"2006-09-09T18:42:27","date_gmt":"2006-09-10T03:42:27","guid":{"rendered":"http:\/\/yvod.com\/ulan\/slider-code"},"modified":"2006-09-09T18:42:27","modified_gmt":"2006-09-10T03:42:27","slug":"slider-code","status":"publish","type":"post","link":"http:\/\/yvod.com\/ulan\/slider-code\/","title":{"rendered":"Slider code"},"content":{"rendered":"

Reworked a bit of slider code from 45royale.com<\/a>. We are using it on our new site so I figured I would share with all =)<\/p>\n

----<\/p>\n

1) Grab http:\/\/prototype.conio.net<\/a> and http:\/\/script.aculo.us<\/a><\/strong> <\/p>\n

2) Make sure effects.js has the Combo Variables code [displayed below]<\/strong><\/p>\n

3) Add the css code to your css file<\/strong><\/p>\n

4) Add slider code to HTML files<\/strong><\/p>\n

5) Add a button image to your media folder<\/strong><\/p>\n

----<\/p>\n

\/*
\n--------------------------------------------------
\nCombo Variables code
\n--------------------------------------------------
\n*\/<\/p>\n

Effect.OpenUp = function(element) {
\n  element = $(element);
\n  new Effect.BlindDown(element, arguments[1] || {});
\n}<\/p>\n

Effect.CloseDown = function(element) {
\n  element = $(element);
\n  new Effect.BlindUp(element, arguments[1] || {});
\n}<\/p>\n

Effect.Combo = function(element) {
\n  element = $(element);
\n  if(element.style.display == ‘none’) {
\n    new Effect.OpenUp(element, arguments[1] || {});
\n  }else {
\n    new Effect.CloseDown(element, arguments[1] || {});
\n  }
\n}<\/p>\n

----<\/p>\n

\/*
\n--------------------------------------------------
\nslider css code
\n--------------------------------------------------
\n*\/<\/p>\n

.slider {
\n  width: 629px;
\n  margin: 0px 0px 0px 0px;
\n  padding: 7px 7px 0px 7px;
\n  border: 1px solid #999999;<\/p>\n

}<\/p>\n

.slider a {
\n  margin: 0px 0px 0px 0px;
\n  padding: 0px 0px 0px 0px;
\n  background: #ffffff url(\/media\/new\/plus-button.png) no-repeat center right;
\n  min-height: 25px;
\n  \/* border: 1px solid #999999; *\/
\n  display: block;
\n  color: #606060;
\n}<\/p>\n

.slider a:hover {
\n  color: #999999;
\n}
\n----<\/p>\n

<!-- html code --><\/p>\n

  <div class=”slider”>
\n 
\n    <h5><a href=”javascript:Effect.Combo(‘slide-content’, {duration: .5});”>
\n    Click to slide<\/a><\/h5>
\n   
\n    <div id=”slide-content” style=”display:none;”>
\n     
\n      Content you want to slide
\n   
\n    <\/div> <!-- id=”slide-content” -->
\n 
\n  <\/div> <!-- class=”slider” --><\/p>\n

----<\/p>\n

Button --> <\/p>\n","protected":false},"excerpt":{"rendered":"

Reworked a bit of slider code from http:\/\/prototype.conio.net and<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,12],"tags":[],"class_list":["post-89","post","type-post","status-publish","format-standard","hentry","category-code-computers","category-yvod"],"_links":{"self":[{"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/posts\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":0,"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/posts\/89\/revisions"}],"wp:attachment":[{"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/media?parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/categories?post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/yvod.com\/ulan\/wp-json\/wp\/v2\/tags?post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}