jQuery JSlide

PHPportalen Forum Index » Tips och Trix
Lägg ett bokmärke på hela tråden
Skapa nytt inlägg   Svara på inlägget
Visa föregående ämne :: Visa nästa ämne  
Startad av: Meddelande
hallis



Medlem i: 5760 dagar
Från: Stockholm
Status: Offline



#722297
Inlägg Skrivet: 2012-04-05 17:17      Ämne: jQuery JSlide Citera

Hej, byggde en JS-karusell för något år sedan som jag nu har använt i ett 20-tal projekt och den håller verkligen måttet. Så jag tänkte att ni kanske också var intresserade av den.

Kräver jQuery 1.5+

Den initieras med följande kommandon:
KOD:
1:
<ul id="jslide">
2:
   <li><img src="images/0001.jpg" alt="0001.jpg"></li>
3:
   <li><img src="images/0002.jpg" alt="0002.jpg"></li>
4:
   <li><img src="images/0003.jpg" alt="0003.jpg"></li>
5:
   <li><img src="images/0004.jpg" alt="0004.jpg"></li>
6:
   <li><img src="images/0005.jpg" alt="0005.jpg"></li>
7:
   <li><img src="images/0006.jpg" alt="0006.jpg"></li>
8:
</ul>
9:
 
10:
$('#jslide').jslide({
11:
   width:800,
12:
   height:600,
13:
   nextButton: '#next',
14:
   prevButton: '#prev'
15:
});


Dessa parametrar kan användas:

Storlek
width - Bredd på karusell-element
height - Höjd på karusell-element

Call buttons
prevButton - ID (t ex "#elmid") på element som agerar knapp för förra element
nextButton - ID (t ex "#elmid") på element som agerar knapp för nästa element

Position
align - left|center|right
verticalCenter - true/false

Rotation
interval - Sekunder mellan automatiskt element byte (inte satt = off)
duration - Millisekunder hur snabbt bytet ska ske

Callback (förses med aktuella elements position samt total)
onRotate - Callback efter rotation
onInit - Callback vid init


Update

Glömde bort att säga att man också kan använda följande sätt att navigera.

KOD:
1:
$('#jslide').jslide('goto', 1);


Samt att callback-funktionerna kan se ut så här:

KOD:
1:
$('#jslide').jslide({
2:
   onRotate: function(current, total) {
3:
      console.log('Current position: ' + current);
4:
   }
5:
});
 

_________________
Utvecklingsbloggen
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Gizmo955



Medlem i: 2471 dagar

Status: Offline



#722684
Inlägg Skrivet: 2012-04-16 09:50      Ämne: Citera

Hur du fungerar den på surfplattor?
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
Jalet



Medlem i: 5234 dagar
Från: Järfälla, Kallhäll
Status: Offline



#722685
Inlägg Skrivet: 2012-04-16 11:18      Ämne: Citera

Kan du inte lägga upp en demosida istället, är lite drygt att dra ner och sätta upp ett projekt.

Sen skulle det vara kul att få upp det på github eller nått så att man kan bygga vidare på den och utveckla för touch-enheter etc.
 

_________________
http://www.tv.nu | http://www.sport.nu
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Skicka e-post Besök användarens hemsida
Makkesk8



Medlem i: 2853 dagar
Från: Polen & danmark
Status: Offline



#722792
Inlägg Skrivet: 2012-04-19 12:22      Ämne: Citera

Den fungerar på touch enheter.
 

_________________
http://kz-extreme.net/
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida AIM-adress Yahoo Messenger MSN Messenger
hallis



Medlem i: 5760 dagar
Från: Stockholm
Status: Offline



#723671
Inlägg Skrivet: 2012-05-22 22:14      Ämne: Citera

Förlåt för sena svar.

Jag ska slänga upp den på Git asap - har bara inte blivit av.

Den fungerar utan problem på i mobila enheter.

Nu finns den uppdaterad till 1.1.3.

Demo: http://jacobhallsten.se/jslide/

Changelog:
Minor bugfix
Standard speed 400 instead of 600

Update:
Github:
https://github.com/hallis2/jQuery-jSlide/
 

_________________
Utvecklingsbloggen
Till toppen på sidan
Visa användarprofil Skicka privat meddelande Besök användarens hemsida
Visa tidigare inlägg:   
Skapa nytt inlägg   Svara på inlägget
PHPportalen Forum Index » Tips och Trix
Hoppa till:  
Du kan inte skapa nya inlägg i det här forumet
Du kan inte svara på inlägg i det här forumet
Du kan inte ändra dina inlägg i det här forumet
Du kan inte ta bort dina inlägg i det här forumet
Du kan inte rösta i det här forumet
Du kan inte bifoga filer i detta forum
Du kan inte ladda ner filer från detta forum
Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic