Post by: Bell on April 04, 2013, 07:30:53 am
So i'm doing a small side project for a friend that involves allowing people to SMS to a certain number that feeds messages into a database and then displays the messages on a website at the certain time.
There will also some be pictures that will be displayed at the same time as the messages in sort of a slide show fashion.
My mate would like to be able to deal with the slide show stuff on his side without me having to do it so he can control the feel.
So this all smells like flash to me but he has no skills in this and wanted something 'simple' that allows him to create picture transitions are there any other options?
Personally i'd like to just do this myself using abit of javascript there is probably some library that has already deal with this.
Any thoughts would be much appreciated.
Post by: Xenolightning on April 04, 2013, 08:06:50 am
He'll get to choose from.
- Blinds - [ms]
- Slide Left - [ms]
- Spin - [ms]
etc..
EDIT: You could skip this^ step and try integrate with something like NivoSlider
Then create a simplistic slideshow creator page, can be as simple as a grid. Eg. Add photo, select transition for photo. Save slideshow to database, with transitions. (If no transition set maybe choose a random one)
Load slideshow into HTML
Success?
EDIT 2: Fuck Nivo Slider, https://github.com/joelambert/Flux-Slider, that looks boss. With a timer, transition attribute in html, and some other bits n pieces you should be able to boss a solution.
Post by: Xenolightning on April 04, 2013, 09:55:56 am
Code: [Select]
//xeno: added support to copy for data- attributes
var img_attributes = $(found_img).prop("attributes");
$.each(img_attributes, function() {
if(this.name.indexOf('data-') > 0)
$(imgClone).attr(this.name, this.value);
});
Code: [Select]
if(transition == undefined || !flux.transitions[transition])
{
//xeno: Added support to check a data-transition attribute
//if it exists then use that as the transition
var trans = $(this.getImage(this.currentImageIndex)).attr('data-transition');
if(trans === undefined){
// Pick a transition at random from the (possibly reduced set of) transitions
var index = Math.floor(Math.random()*(this.options.transitions.length));
transition = this.options.transitions[index];
}else{
transition = trans;
}
}
Usage:
Code: [Select]
![""]("img/avatar.jpg")
/Thread
Post by: mycoolcar on April 04, 2013, 10:37:52 am
Post by: Xenolightning on April 04, 2013, 02:21:17 pm
Post by: Pyromanik on April 04, 2013, 05:43:21 pm
http://jquery.malsup.com/cycle2
Nivo can be a cunt to set up, Flux I have not played with, but cycle is the most flexible thing I've ever used. Almost never go past it. Now also has plugin for 'tiles' (nivo-like behaviour). Even if you don't use it for images, can use it for messages, or anything (it's not just an image slider, it cycles any element).
http://www.joelambert.co.uk/flux/
Flux does look extremely sexy, but looks like it needs CSS3 features (so bascially no IE < 10).
Thanks for protip tho xeno.
Post by: Bell on April 04, 2013, 06:16:57 pm
Thanks heaps bros
Post by: Bell on April 04, 2013, 06:17:27 pm
Thanks heaps bros
Post by: Xenolightning on April 04, 2013, 11:07:51 pm
Quote from: Pyromanik;1522569
Cycle. Best slider. Now in the flavour of 2.
[url]http://jquery.malsup.com/cycle2[/url]
Nivo can be a cunt to set up, Flux I have not played with, but cycle is the most flexible thing I've ever used. Almost never go past it. Now also has plugin for 'tiles' (nivo-like behaviour). Even if you don't use it for images, can use it for messages, or anything (it's not just an image slider, it cycles any element).
[url]http://www.joelambert.co.uk/flux/[/url]
Flux does look extremely sexy, but looks like it needs CSS3 features (so bascially no IE < 10).
Thanks for protip tho xeno.
Wow, I also like Cycle, shit legit. Giving and receiving that's what programming is about...
Yeah pitty about flux using CSS3. But DAYMN those 3D effects.
Post by: Pyromanik on April 04, 2013, 11:55:22 pm
And if you find some builtin component doesn't have the flexibility you want, it has all the right hooks in all the right places to get around it. Like building your own 'pager' system, etc.
Post by: Bell on April 10, 2013, 02:15:22 am
Post by: Xenolightning on April 10, 2013, 09:15:04 am
Quote from: Bell;1522987
So I used cycle and it went fucking swimmingly cheers for the tip.BAM AND THE DIRT IS GONE.
Son, I am Appoint.
Post by: Pyromanik on April 10, 2013, 05:46:49 pm
Post by: Garrett303 on April 11, 2013, 03:05:11 pm
Post by: Xenolightning on April 11, 2013, 03:20:15 pm
Post by: Pyromanik on April 11, 2013, 05:27:19 pm