added slider to getting started flow
This commit is contained in:
danielvincent
parent
b52afdd93c
commit
f23d199230
5 changed files with 312 additions and 66 deletions
|
|
@ -30,6 +30,7 @@
|
|||
= javascript_include_tag 'fileuploader'
|
||||
|
||||
= javascript_include_tag 'view', 'image_picker', 'stream'
|
||||
= javascript_include_tag 'easySlider1.7'
|
||||
|
||||
= render 'js/websocket_js'
|
||||
|
||||
|
|
|
|||
|
|
@ -10,84 +10,84 @@
|
|||
.description
|
||||
Do the stuff below to further complete some things.
|
||||
|
||||
%h2
|
||||
%u
|
||||
Edit your profile
|
||||
➔
|
||||
Define your aspects ➔
|
||||
Find your friends
|
||||
#slider
|
||||
%ul
|
||||
%li
|
||||
%h2
|
||||
%u
|
||||
Edit your profile
|
||||
➔
|
||||
Define your aspects ➔
|
||||
Find your friends
|
||||
|
||||
|
||||
%h3
|
||||
Your Profile
|
||||
.description
|
||||
This info will be available to whomever you connect with on Diaspora.
|
||||
%h3
|
||||
Your Profile
|
||||
.description
|
||||
This info will be available to whomever you connect with on Diaspora.
|
||||
|
||||
%h4
|
||||
Your name
|
||||
= text_field_tag :first_name, nil, :placeholder => "First name"
|
||||
= text_field_tag :last_name, nil, :placeholder => "Last name"
|
||||
%h4
|
||||
Your name
|
||||
= text_field_tag :first_name, nil, :placeholder => "First name"
|
||||
= text_field_tag :last_name, nil, :placeholder => "Last name"
|
||||
|
||||
%h4
|
||||
Your birthday
|
||||
%br
|
||||
= select_date
|
||||
%h4
|
||||
Your birthday
|
||||
%br
|
||||
= select_date
|
||||
|
||||
%h4
|
||||
Your bio
|
||||
= text_area_tag :bio, nil, :placeholder => "Fill me out"
|
||||
%h4
|
||||
Your bio
|
||||
= text_area_tag :bio, nil, :placeholder => "Fill me out"
|
||||
|
||||
%h4
|
||||
Your photo
|
||||
%br
|
||||
= file_field_tag :photo
|
||||
%h4
|
||||
Your photo
|
||||
%br
|
||||
= file_field_tag :photo
|
||||
|
||||
|
||||
%br
|
||||
%br
|
||||
%br
|
||||
%h2
|
||||
Edit your profile ➔
|
||||
%u
|
||||
Define your aspects
|
||||
➔
|
||||
Find your friends
|
||||
%li
|
||||
%h2
|
||||
Edit your profile ➔
|
||||
%u
|
||||
Define your aspects
|
||||
➔
|
||||
Find your friends
|
||||
|
||||
%h3
|
||||
Your aspects
|
||||
.description
|
||||
These will be blah blah blah blah and some stuff.
|
||||
%h3
|
||||
Your aspects
|
||||
.description
|
||||
These will be blah blah blah blah and some stuff.
|
||||
|
||||
%h4
|
||||
Aspect name
|
||||
= text_field_tag :aspect_name, nil, :placeholder => "New aspect"
|
||||
|
||||
%br
|
||||
%br
|
||||
%br
|
||||
%h2
|
||||
Edit your profile ➔
|
||||
Define your aspects ➔
|
||||
%u
|
||||
Find your friends
|
||||
%h4
|
||||
Aspect name
|
||||
= text_field_tag :aspect_name, nil, :placeholder => "New aspect"
|
||||
|
||||
|
||||
%h3
|
||||
Your friends
|
||||
.description
|
||||
Find your friends on Diaspora, Facebook, or send them an invite via email.
|
||||
%li
|
||||
%h2
|
||||
Edit your profile ➔
|
||||
Define your aspects ➔
|
||||
%u
|
||||
Find your friends
|
||||
|
||||
.span-5
|
||||
%h4
|
||||
On Diaspora
|
||||
= text_field_tag :diaspora_handle, nil, :placeholder => "Diaspora handle"
|
||||
|
||||
.span-5
|
||||
%h4
|
||||
On Facebook
|
||||
= text_field_tag :facebook_handle, nil, :placeholder => "Name"
|
||||
%h3
|
||||
Your friends
|
||||
.description
|
||||
Find your friends on Diaspora, Facebook, or send them an invite via email.
|
||||
|
||||
.span-5
|
||||
%h4
|
||||
Invite
|
||||
= text_field_tag :email, nil, :placeholder => "Email", :type => "email"
|
||||
.span-5
|
||||
%h4
|
||||
On Diaspora
|
||||
= text_field_tag :diaspora_handle, nil, :placeholder => "Diaspora handle"
|
||||
|
||||
.span-5
|
||||
%h4
|
||||
On Facebook
|
||||
= text_field_tag :facebook_handle, nil, :placeholder => "Name"
|
||||
|
||||
.span-5
|
||||
%h4
|
||||
Invite
|
||||
= text_field_tag :email, nil, :placeholder => "Email", :type => "email"
|
||||
|
|
|
|||
226
public/javascripts/easySlider1.7.js
Normal file
226
public/javascripts/easySlider1.7.js
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
/*
|
||||
* Easy Slider 1.7 - jQuery plugin
|
||||
* written by Alen Grakalic
|
||||
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
|
||||
*
|
||||
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
|
||||
* Dual licensed under the MIT (MIT-LICENSE.txt)
|
||||
* and GPL (GPL-LICENSE.txt) licenses.
|
||||
*
|
||||
* Built for jQuery library
|
||||
* http://jquery.com
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
* markup example for $("#slider").easySlider();
|
||||
*
|
||||
* <div id="slider">
|
||||
* <ul>
|
||||
* <li><img src="images/01.jpg" alt="" /></li>
|
||||
* <li><img src="images/02.jpg" alt="" /></li>
|
||||
* <li><img src="images/03.jpg" alt="" /></li>
|
||||
* <li><img src="images/04.jpg" alt="" /></li>
|
||||
* <li><img src="images/05.jpg" alt="" /></li>
|
||||
* </ul>
|
||||
* </div>
|
||||
*
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
$.fn.easySlider = function(options){
|
||||
|
||||
// default configuration properties
|
||||
var defaults = {
|
||||
prevId: 'prevBtn',
|
||||
prevText: 'Previous',
|
||||
nextId: 'nextBtn',
|
||||
nextText: 'Next',
|
||||
controlsShow: true,
|
||||
controlsBefore: '',
|
||||
controlsAfter: '',
|
||||
controlsFade: true,
|
||||
firstId: 'firstBtn',
|
||||
firstText: 'First',
|
||||
firstShow: false,
|
||||
lastId: 'lastBtn',
|
||||
lastText: 'Last',
|
||||
lastShow: false,
|
||||
vertical: false,
|
||||
speed: 800,
|
||||
auto: false,
|
||||
pause: 2000,
|
||||
continuous: false,
|
||||
numeric: false,
|
||||
numericId: 'controls'
|
||||
};
|
||||
|
||||
var options = $.extend(defaults, options);
|
||||
|
||||
this.each(function() {
|
||||
var obj = $(this);
|
||||
var s = $("li", obj).length;
|
||||
var w = $("li", obj).width();
|
||||
var h = $("li", obj).height();
|
||||
var clickable = true;
|
||||
obj.width(w);
|
||||
obj.height(h);
|
||||
obj.css("overflow","hidden");
|
||||
var ts = s-1;
|
||||
var t = 0;
|
||||
$("ul", obj).css('width',s*w);
|
||||
|
||||
if(options.continuous){
|
||||
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
|
||||
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
|
||||
$("ul", obj).css('width',(s+1)*w);
|
||||
};
|
||||
|
||||
if(!options.vertical) $("li", obj).css('float','left');
|
||||
|
||||
if(options.controlsShow){
|
||||
var html = options.controlsBefore;
|
||||
if(options.numeric){
|
||||
html += '<ol id="'+ options.numericId +'"></ol>';
|
||||
} else {
|
||||
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
|
||||
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
|
||||
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
|
||||
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
|
||||
};
|
||||
|
||||
html += options.controlsAfter;
|
||||
$(obj).after(html);
|
||||
};
|
||||
|
||||
if(options.numeric){
|
||||
for(var i=0;i<s;i++){
|
||||
$(document.createElement("li"))
|
||||
.attr('id',options.numericId + (i+1))
|
||||
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
|
||||
.appendTo($("#"+ options.numericId))
|
||||
.click(function(){
|
||||
animate($("a",$(this)).attr('rel'),true);
|
||||
});
|
||||
};
|
||||
} else {
|
||||
$("a","#"+options.nextId).click(function(){
|
||||
animate("next",true);
|
||||
});
|
||||
$("a","#"+options.prevId).click(function(){
|
||||
animate("prev",true);
|
||||
});
|
||||
$("a","#"+options.firstId).click(function(){
|
||||
animate("first",true);
|
||||
});
|
||||
$("a","#"+options.lastId).click(function(){
|
||||
animate("last",true);
|
||||
});
|
||||
};
|
||||
|
||||
function setCurrent(i){
|
||||
i = parseInt(i)+1;
|
||||
$("li", "#" + options.numericId).removeClass("current");
|
||||
$("li#" + options.numericId + i).addClass("current");
|
||||
};
|
||||
|
||||
function adjust(){
|
||||
if(t>ts) t=0;
|
||||
if(t<0) t=ts;
|
||||
if(!options.vertical) {
|
||||
$("ul",obj).css("margin-left",(t*w*-1));
|
||||
} else {
|
||||
$("ul",obj).css("margin-left",(t*h*-1));
|
||||
}
|
||||
clickable = true;
|
||||
if(options.numeric) setCurrent(t);
|
||||
};
|
||||
|
||||
function animate(dir,clicked){
|
||||
if (clickable){
|
||||
clickable = false;
|
||||
var ot = t;
|
||||
switch(dir){
|
||||
case "next":
|
||||
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
|
||||
break;
|
||||
case "prev":
|
||||
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
|
||||
break;
|
||||
case "first":
|
||||
t = 0;
|
||||
break;
|
||||
case "last":
|
||||
t = ts;
|
||||
break;
|
||||
default:
|
||||
t = dir;
|
||||
break;
|
||||
};
|
||||
var diff = Math.abs(ot-t);
|
||||
var speed = diff*options.speed;
|
||||
if(!options.vertical) {
|
||||
p = (t*w*-1);
|
||||
$("ul",obj).animate(
|
||||
{ marginLeft: p },
|
||||
{ queue:false, duration:speed, complete:adjust }
|
||||
);
|
||||
} else {
|
||||
p = (t*h*-1);
|
||||
$("ul",obj).animate(
|
||||
{ marginTop: p },
|
||||
{ queue:false, duration:speed, complete:adjust }
|
||||
);
|
||||
};
|
||||
|
||||
if(!options.continuous && options.controlsFade){
|
||||
if(t==ts){
|
||||
$("a","#"+options.nextId).hide();
|
||||
$("a","#"+options.lastId).hide();
|
||||
} else {
|
||||
$("a","#"+options.nextId).show();
|
||||
$("a","#"+options.lastId).show();
|
||||
};
|
||||
if(t==0){
|
||||
$("a","#"+options.prevId).hide();
|
||||
$("a","#"+options.firstId).hide();
|
||||
} else {
|
||||
$("a","#"+options.prevId).show();
|
||||
$("a","#"+options.firstId).show();
|
||||
};
|
||||
};
|
||||
|
||||
if(clicked) clearTimeout(timeout);
|
||||
if(options.auto && dir=="next" && !clicked){;
|
||||
timeout = setTimeout(function(){
|
||||
animate("next",false);
|
||||
},diff*options.speed+options.pause);
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
// init
|
||||
var timeout;
|
||||
if(options.auto){;
|
||||
timeout = setTimeout(function(){
|
||||
animate("next",false);
|
||||
},options.pause);
|
||||
};
|
||||
|
||||
if(options.numeric) setCurrent(0);
|
||||
|
||||
if(!options.continuous && options.controlsFade){
|
||||
$("a","#"+options.prevId).hide();
|
||||
$("a","#"+options.firstId).hide();
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
||||
|
||||
|
||||
|
|
@ -74,6 +74,9 @@ $(document).ready(function(){
|
|||
};
|
||||
});
|
||||
|
||||
$("#slider").easySlider({speed:400, numeric:true});
|
||||
|
||||
|
||||
$("img", "#left_pane").tipsy({live:true});
|
||||
$(".add_aspect_button", "#aspect_nav").tipsy({gravity:'w'});
|
||||
$(".person img", ".dropzone").tipsy({live:true});
|
||||
|
|
@ -133,3 +136,10 @@ $(".make_profile_photo").live("click", function(){
|
|||
});
|
||||
});
|
||||
|
||||
$(".getting_started_box").live("click",function(evt){
|
||||
$(this).animate({
|
||||
left: parseInt($(this).css('left'),30) == 0 ?
|
||||
-$(this).outerWidth() :
|
||||
0
|
||||
},function(evt){ $(this).css('left', '1000px')});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1243,3 +1243,12 @@ ul#breadcrumb
|
|||
&:last-child
|
||||
&:after
|
||||
:content ''
|
||||
|
||||
#slider ul, #slider li
|
||||
:margin 0
|
||||
:padding 0
|
||||
:list-style none
|
||||
|
||||
#slider, #slider li
|
||||
:width 1000px
|
||||
:overflow hidden
|
||||
|
|
|
|||
Loading…
Reference in a new issue