Forums / Cotonti / Support / jQuery

12>>>

pieter
#1 2010-08-25 20:50

Team
Thanked: 9 times

Hello guys,

I'm looking for something like this: http://hetmag.nl/

The banner with the next/prev and pause button.
I've looking arouond but didn't find something simular.

I use now the banner-rotate plugin, but it only gets a new image on refresh.

Does anyone knows where I can find this?
Thanks,

Pieter
... can we help you ...
This post was edited by pieter (2010-08-25 21:00, 13 years ago)
urlkiller
#2 2010-08-25 21:25

Contributors
Thanked: 3 times

maybe this: http://bbm.li/nk/35EE12 ?
URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
This post was edited by urlkiller (2010-08-26 00:48, 13 years ago)
pieter
#3 2010-08-25 23:05

Team
Thanked: 9 times

I'm looking for a version with the arrows to go to the next and the previous.
And that he does an auto-rotate.
... can we help you ...
urlkiller
#4 2010-08-25 23:06

Contributors
Thanked: 3 times

it has buttons, pause, auto rotate, etc. just take a look at the demos and use your imaginination.

Added 44 seconds later:

you need to add the buttons via id="my_button" to any element on your site.
also you need to add it to the startup code

Added 1 minute later:

kinglsley used it here: http://bbm.li/nk/8E222F

he only used the next / back buttons... but you can scroll ANY DOM-Element encapsuled in a tag <div>
URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
This post was edited by urlkiller (2010-08-26 02:12, 13 years ago)
pieter
#5 2010-08-25 23:35

Team
Thanked: 9 times

I want to use the Manual and Auto Advance.
On http://jquery.malsup.com/cycle/int2.html

But they give me this code:
$('#s3').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 3000, 
    next:   '#s3', 
    pause:   1 
});

Where do I put this?

This is on now:
<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});
</script>

I change the fx: fade with the code above, but it didn't do anything.
I added the code and it did't do anything.

I don't know what to do.
... can we help you ...
urlkiller
#6 2010-08-25 23:55

Contributors
Thanked: 3 times

ok first check out this post: http://bbm.li/nk/EFA578

and now this:
$(document).ready(function() {
	// speed 		= transition time in mil secs
	// timeout 	= time how long the image stays in mil secs
	// pause 		= if you enter the box with your mouse stop sliding auto
	$('#slideshow').cycle({fx: 'scrollHorz', speed: 1000, timeout: 60000, next: '#MyNextButton', prev: '#MyPrevButton',pause: 1});
});

hope that helps a bit...

Added 51 seconds later:

is there some sort of test url where i can take a view of the code?
URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
This post was edited by urlkiller (2010-08-26 02:13, 13 years ago)
pieter
#7 2010-08-26 00:02

Team
Thanked: 9 times

/list.php?c=links is with your code. I changed #slideshow in .slideshow

Home uses the standard code for the cycle. (header.home.tpl)

Added 22 seconds later:

Off for dinner.
... can we help you ...
This post was edited by pieter (2010-08-26 00:36, 13 years ago)
urlkiller
#8 2010-08-26 00:30

Contributors
Thanked: 3 times

ok it seems to work...

set the timeout to a a time you wish currently it is set to 60 secons (60000 miliseconds)
maybe you have to set it to 5000 miliseconds to see the effect a bit better in my example...

now you need to make some next/back/pause buttons and say the cycle() the right id of the element.


for now both examples work, didnt they?
URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
pieter
#9 2010-08-26 00:35

Team
Thanked: 9 times

thx URLkiller. I change it to what I wanted:
$('#s3').cycle({ 
    fx:     'fade', 
    speed:   300, 
    timeout: 3000, 
    next:   '#s3', 
    pause:   1 
});

I changed the #s3 to .slideshow, but I forgot the second one. Now it works.
If you click you get the next. If you hover the auto-rotate is stopped.

Thanks for your time and help.

I will delete the links above, because it is a little bit private/family.
... can we help you ...
urlkiller
#10 2010-08-26 00:46

Contributors
Thanked: 3 times

sure sure!! happy i could help!
URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
pieter
#11 2010-08-26 00:47

Team
Thanked: 9 times

One problem, it interact with the slimbox plugin
http://www.cotonti.com/downloads/plugins/files-images/slimbox

See http://www.kruisstraat89.be/ and click on a small picture below
... can we help you ...
urlkiller
#12 2010-08-26 00:51

Contributors
Thanked: 3 times

ok not 100% sure about it but it can come from the additional include of the other jquery part
try to delete the new inclusion of the jquery.min thing

Added 27 seconds later:

this part: <!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
pieter
#13 2010-08-26 00:56

Team
Thanked: 9 times

You did it again. THX a lot
... can we help you ...
urlkiller
#14 2010-08-26 01:11

Contributors
Thanked: 3 times

yeah, am i cool or what? ;)
URL shortener: <a href="http://bbm.li/!7AD5C7">http://bbm.li/!7AD5C7</a>
pieter
#15 2010-08-26 01:35

Team
Thanked: 9 times

hard one, can you make them go random?
... can we help you ...

12>>>