Response title
This is preview!
Move this topic
Urgent: Need a jQuery scroller for images that are hoverable
in Developing jQuery Plugins
•
10 years ago
Hey all, I basically need to mimic this the scroller at the bottom of this site:
http://hobsonvillepoint.universal.co.nz/
I'm using wordpress. I've looked on CodeCanyon and WP plugins but can't find anything like it.
If anyone knows where I could get something like that, or would like to make one to get some cash - I'd be very greatful.
Cheers
http://hobsonvillepoint.universal.co.nz/
I'm using wordpress. I've looked on CodeCanyon and WP plugins but can't find anything like it.
If anyone knows where I could get something like that, or would like to make one to get some cash - I'd be very greatful.
Cheers
1
Replies(9)
JΛ̊KE
Leave a comment on jakecigar's reply
Are you sure? The demo doesn't have a hovering effect to it. =\ Nor are they clickable.
Thanks for the prompt response btw.
Thanks for the prompt response btw.
Leave a comment on chadmaestro's reply
jQuery Smooth Div Scroll - smooth content scrolling jQuery plugin - Thomas Kahn
Has lots of examples. They used different options.
JΛ̊KE
JΛ̊KE
they used
JΛ̊KE
- $("#footer-logo-div").smoothDivScroll({
- manualContinuousScrolling: true,
- visibleHotSpotBackgrounds: "",
- autoScrollingMode: "onstart",
- autoScrollingInterval: 60
- });
JΛ̊KE
Leave a comment on jakecigar's reply
The entire script is
JΛ̊KE
- <script type="text/javascript">
- function replaceOneChar(s,c,n) {
- var re = new RegExp('^(.{'+ --n +'}).(.*)$','');
- return s.replace(re,'$1'+c+'$2');
- };
- function changeImage(id) {
- $("#details-main-img").css("background-image", "url('" + id + "')");
- }
- $(document).ready(function() {
- $('<img src="/templates/basic_tpl/images/logos/fpb2.png" />');
- $('<img src="/templates/basic_tpl/images/logos/hmt2.png" />');
- $('<img src="/templates/basic_tpl/images/logos/mbd2.png" />');
- $('<img src="/templates/basic_tpl/images/logos/nec2.png" />');
- $('<img src="/templates/basic_tpl/images/logos/rec2.png" />');
- $('<img src="/templates/basic_tpl/images/logos/shw2.png" />');
- $('<img src="/templates/basic_tpl/images/logos/wes2.png" />');
- $("#footer-logo-div").smoothDivScroll({
- manualContinuousScrolling: true,
- visibleHotSpotBackgrounds: "",
- autoScrollingMode: "onstart",
- autoScrollingInterval: 60
- });
- // Logo parade event handlers
- $("#footer-logo-div").bind("mouseover", function() {
- $(this).smoothDivScroll("stopAutoScrolling");
- }).bind("mouseout", function() {
- $(this).smoothDivScroll("startAutoScrolling");
- });
- $(".footer-logo").bind("mouseover", function() {
- $(this).attr('src', replaceOneChar($(this).attr('src'), '2', 38));
- }).bind("mouseout", function() {
- $(this).attr('src', replaceOneChar($(this).attr('src'), '1', 38));
- });
- });
- </script>
JΛ̊KE
Leave a comment on jakecigar's reply
Thanks very much. I actually used the link you sent me before and am using the following code. Everything is working fine, except the timing. It's not taking on board the smoothness, no matter what I set the delay to.
This is attributed to autoScrollingInterval but it's not taking the settings, you can see my example at the bottom of the page: http://cardwells.techroom.net.nz/eibach/
Thanks very much so far : )
This is attributed to autoScrollingInterval but it's not taking the settings, you can see my example at the bottom of the page: http://cardwells.techroom.net.nz/eibach/
Thanks very much so far : )
Leave a comment on chadmaestro's reply
You just have this:
- $("div#makeMeScrollable").smoothDivScroll({
- autoScrollingMode: "onstart"
- });
You probably need
- $("div#makeMeScrollable").smoothDivScroll({
- manualContinuousScrolling: true,
- visibleHotSpotBackgrounds: "", //???
- autoScrollingMode: "onstart",
- autoScrollingInterval: 60
- });
And take out the right-click prevention code. It makes it very hard to debug.
Leave a comment on jakecigar's reply
Put those in but no luck unfortunately. There's some CSS errors I've been getting. The way he embeds the style into the id, when I do that, the images start duplicating lol. =\
Edit: Could you also please check the CSS, for some reason the images are duplicating.
Edit: Could you also please check the CSS, for some reason the images are duplicating.
Leave a comment on chadmaestro's reply
Did you take out the right-click prevention code? It makes it very hard to debug.
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to chadmaestro's question
Statistics
- 9 Replies
- 3028 Views
- 1 Followers