Search Results

Search found 62 results on 3 pages for 'jcarousel'.

Page 1/3 | 1 2 3  | Next Page >

  • input type="text" not clickable in a jcarousel (jQuery based carousel) element

    - by AkaiKen
    Hello ! I work on a website where almost all objects are in a jCarousel element : <div> <ul id="mycarousel"> <li>object 1</li> <li>object 2</li> </ul> </div> is the "written" code, and : <div class=" jcarousel-skin-tango"> <div class="jcarousel-container jcarousel-container-horizontal" style="display: block;"> <div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div> <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div> <div class="jcarousel-clip jcarousel-clip-horizontal"> <ul class=" jcarousel-list jcarousel-list-horizontal" id="mycarousel" style="width: 2853px; left: 0px;"> <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="width: 307px;"> object 1 </li> <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="width: 307px;"> object 2 </li> </ul> </div> </div> is the generated code (here it lacks the ultimate </div>, maybe a number of rows limitation ?). I'm sorry I can't provide a link, I work on a local server currently. It works perfectly =) but... my problem is : an <input type="text" /> won't be clickable in this environment. I tried the others type of input, radio, checkbox, file : works. But text does not. I can specify a value on my input (it's its purpose on my work : a search in a database for datas to be modified and reinjected in database). In fact, I can access to the text input by clicking-right in then left. But it's pretty 'unergonomic', and in my project it's unthinkable. Ah, and I tried to style this input with a style="z-index:1000;", no changes, I think it's not a CSS problem. Does anybody have an idea ? Thank you very much in advance.

    Read the article

  • jcarousel not getting drawn inside a hidden div

    - by zoom_pat277
    I am struggling since hrs on this one now. I am using a div to populate a ul/li list and then draw a jcarousel out of it. So this works fine $('#mycarousel').jcarousel(); everything works fine as expected... but here is the scenario. the div inside which I have ul/li items could be hidden by the click of another button. When the div is hidden, and I resize the browser window...the jcaraousel also attempts to redraw itself... but since it is hidden, it is not able to draw it properly. and everyting is jumbled up in the list (if I click the button again to make it visible)... but again if I resize the window now (the jumbled up jcarousel is NOT hidden now)... it redraws itself correctly... I was wondering to get hold of the jcarousel instance and reload itself as soon as the button is clicked to make the div visible (the way it resizes itself when it is visible and window is resized) to get hold of the jcarousel.. I am using JQuery('#mycarousel').data('jcarousel') and it is returned as null. Anybody has any idea on this one?

    Read the article

  • jCarousel not working properly within tabbed menu

    - by user369292
    Hi everybody, I'm riding three different jCarousel ul, one in each target of a tabbed menu designeb by Yetii. The problem issue is that the one in the first target works well, whereas the remaining two show just a slice of the first picture and slide soon onto a back frame. The jCarousel is initialized by a class as the behaviour required is the same for all targets: jQuery(document).ready(function() { jQuery('.jcarousel-skin-tango').jcarousel({ wrap: 'circular', //size:8, scroll:1, animation:.10, auto:5, }); }); The ul have different id. Tried also initializing the script by separate id but nothing changed. Any suggestion on it? Thanks in advance - Mauirizio

    Read the article

  • preventing jCarousel form returning to begining position after loading page

    - by Crippletoe
    Hi all, i am using jCarousel as a menu in my website. there is a list of links there which is longer than its containing elements and jCarousel is used as a scroll bar to view that list. my problem is that whenever a link is clicked and a new page is loaded, jCarousel resets to its begining position thus sometimes an active link is no longer visible after the page reloads. any idea how i can make jCarousel focus on the specific active link? you can see an example of what i mean here: http://174.133.190.8/~goldarch/index.php?option=com_content&view=article&id=50&Itemid=57 (check out the menu on top) thank you all.

    Read the article

  • jCarousel - achieving an active state AND wrap:circular

    - by swisstony
    Hey folks A while back I implemented the jCarousel image solution for a client that required a numbered active state. After a bit of googling a found the answer but noticed that the preferred circular option would not work. What would happen is that once the carousel had cycled through all its (5) images, upon the return to the first, the active state would be lost, because, according to jcarousel it was actually the 6th (the index just keeps on incrementing). I just went ahead and instead used wrap:'both' which at least had a correctly functioning active state. However now the client says they dont like this effect and simply want the animation to return to position 1 after the final image. This means I need to get'wrap: 'both' working somehow. Below is my current code. Can someone please solve this one, as its a little above my head! function highlight(carousel, obejctli,liindex,listate){ jQuery('.jcarousel-control a:nth-child('+ liindex +')').attr("class","active"); }; function removehighlight(carousel, obejctli,liindex,listate){ jQuery('.jcarousel-control a:nth-child('+ liindex +')').removeAttr("class","active"); }; jQuery('#mycarousel').jcarousel({ initCallback: mycarousel_initCallback, auto: 5, wrap: 'both', vertical: true, scroll: 1, buttonNextHTML: null, buttonPrevHTML: null, animation: 1000, itemVisibleInCallback: highlight, itemVisibleOutCallback: removehighlight }); }); Thanks in advance

    Read the article

  • JQuery jCarousel - Disabling external controls

    - by user287212
    I'm using JQuery and jcarousel, using external navigation controls: http://sorgalla.com/projects/jcarousel/examples/static_controls.html The problem here is the navigation buttons no longer disable as shown here: sorgalla.com/projects/jcarousel/examples/static_simple.html Is there a callback I can use to allow me to swap the active image of a button with an inactive image?

    Read the article

  • jCarousel, IE6 and Fixed Width

    - by Pat Long - Munkii Yebee
    We are using jCarousel on our websites to display images. Simple enough. We have fairly flexible layouts so the carousels are not always the same width. FF, IE7+, Chrome, Safari etc work perfectly well taking up the space available. However IE6 ends up sending the jCarousel script into a loop and warns that a script is stopping the page from loading correctly. To stop IE6 from failing we are having to specify a fixed width in CSS for the carousel container. Is this a problem that others have had with IE6 and jCarousel?

    Read the article

  • JCarousel scroll method does not always fire

    - by Scott Faisal
    var carousel = jQuery('#mycarousel').data('jcarousel'); var index = carousel.size() + 1; carousel.size(index); var html = '<li> some html </li>'; carousel.add(index, html); carousel.scroll(index, 1); The very last scroll method fires but not always. Is this a bug in JCarousel? The following is the code for the scroll method in JCarousel: /** * Scrolls the carousel to a certain position. * * @method scroll * @return undefined * @param i {Number} The index of the element to scoll to. * @param a {Boolean} Flag indicating whether to perform animation. */ scroll: function(i, a) { if (this.locked || this.animating) return; this.animate(this.pos(i), a); }

    Read the article

  • Jquery, Jcarousel smooth infinite scrolling

    - by nharry
    Hi all, I am using jcarousel to auto scroll some images. I would like to know how to make them scroll in one fluid scroll with no pauses or stops. Currently there is a pause and then it scrolls again. If I am not making myself clear then ask and I will try to explain a little better. This is the code: jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ auto: 1, wrap: 'last', vertical: true, animation: 5000 });

    Read the article

  • JCarousel wrap set to 'circular' bug

    - by Scott
    I'm trying to set up a JCarousel instance witht the wrap set to circular, however, I noticed an issue where I "inspect element" in Chrome, duplicate elements are added to the html when the slides repeat (it can be viewed on the official example page). http://sorgalla.com/projects/jcarousel/examples/static_circular.html I know this is an open bug on GitHub. I'm just wondering if anyone has found a temporary workaround. Thanks in advance, - Scott

    Read the article

  • How to make JCarousel Vertical Scroller reverse scroll?

    - by Scott Faisal
    I was able to instantiate a working scroller using jQuery Jcarousel however I need it to reverse scroll. For example right now I have: jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ auto: 1, vertical: true, scroll: 1, animation: "slow", wrap: 'last', initCallback: mycarousel_initCallback }); }); What do I need to do to make the items scroll upwards instead of downwards? Thank You in advance

    Read the article

  • How to avoid double divide in loop?

    - by ignaty
    Thank you for your help. My code looks like: var CatItems = ""; for(var x=0; x < data.PRODUCTS.length; x++) { if (x % 3 === 0) CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">'; CatItems += '<div><a class="large_image" href="#"><img src="'+ data.PRODUCTS[x].product_img +'" alt="' + data.PRODUCTS[x].product_name +'"></a><h3 class="geo_17_darkbrown">' + data.PRODUCTS[x].product_name +'</h3>'; if ( data.PRODUCTS[x].product_onsale==1 ) { CatItems += '<img alt="sale" src="assets/images/sale.gif" class="sale"><span class="geo_17_red_linethr">&pound;'+ data.PRODUCTS[x].product_retailprice +'</span>&nbsp;&nbsp;<span class="price geo_17_darkbrown">&pound;'+ data.PRODUCTS[x].product_webprice +'</span>'; } else { CatItems += '<span class="price geo_17_darkbrown">&pound;'+ data.PRODUCTS[x].product_webprice +'</span>'; } if ( data.PRODUCTS[x].product_COLOURS ) { CatItems += '<span class="colour">'; for(var y=0; y < data.PRODUCTS[x].product_COLOURS.length; y++) { CatItems += '<span><a href="'+ data.PRODUCTS[x].product_COLOURS[y].colours_large +'"><img src="'+ data.PRODUCTS[x].product_COLOURS[y].colours_thumb +'" alt="'+ data.PRODUCTS[x].product_COLOURS[y].colour_name +'" /></a></span>'; } CatItems += '</span>'; } CatItems += '</div>'; if (x % 3 === 2) CatItems += '</li>'; } and it generates this: <div class="carousel_00 jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"> <div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;"> <ul class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 7890px;"> <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-0 jcarousel-item-0-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"> <div> <a href="#" class="large_image"> <img alt="Elena Top" src="assets/images/dress1.gif"></a> <h3 class="geo_17_darkbrown">Elena Top</h3> <img class="sale" src="assets/images/sale.gif" alt="sale"> <span class="geo_17_red_linethr">£120 </span>&nbsp;&nbsp; <span class="price geo_17_darkbrown">£100 </span> <span class="colour"> <span> <a href="assets/images/colour.gif"> <img alt="Black" src="assets/images/black.gif"></a> </span> <span> <a href="assets/images/colour.gif"> <img alt="Brown" src="assets/images/brown.gif"></a> </span> <span> <a href="assets/images/colour.gif"> <img alt="Purple" src="assets/images/purple.gif"></a> </span> </span> </div> <div> <a href="#" class="large_image"> <img alt="Rachel Dress" src="assets/images/dress2.gif"></a> <h3 class="geo_17_darkbrown">Rachel Dress</h3> <span class="price geo_17_darkbrown">£120 </span> </div> <div> <a href="#" class="large_image"> <img alt="Elena Top" src="assets/images/dress3.gif"></a> <h3 class="geo_17_darkbrown">Elena Top</h3> <span class="price geo_17_darkbrown">£120 </span> </div> </li> <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="1"> </li> <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"> <div> <a href="#" class="large_image"> <img alt="Elena Top" src="assets/images/dress1.gif"></a> <h3 class="geo_17_darkbrown">Elena Top</h3> <span class="price geo_17_darkbrown">£120 </span> </div> <div> <a href="#" class="large_image"> <img alt="Elena Top" src="assets/images/dress2.gif"></a> <h3 class="geo_17_darkbrown">Elena Top</h3> <span class="price geo_17_darkbrown">£120 </span> </div> <div> <a href="#" class="large_image"> <img alt="Elena Top" src="assets/images/dress3.gif"></a> <h3 class="geo_17_darkbrown">Elena Top</h3> <span class="price geo_17_darkbrown">£120 </span> </div> </li> <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"> <div> <a href="#" class="large_image"> <img alt="Elena Top" src="assets/images/dress3.gif"></a> <h3 class="geo_17_darkbrown">Elena Top</h3> <span class="price geo_17_darkbrown">£120 </span> </div> <div> <a href="#" class="large_image"> <img alt="Elena Top" src="assets/images/dress3.gif"></a> <h3 class="geo_17_darkbrown">Elena Top</h3> <span class="price geo_17_darkbrown">£120 </span> </div> </li> </ul> </div> <div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"> </div> <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"> </div> <div class="jcarousel-control geo_10_darkbrown_capital"> 7 products&nbsp;&nbsp;&nbsp; <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#" class="last">7</a> </div> </div> It works like it should, put every 3 div's in li. but I have another problem with divide. It divide "x" inside the loop. For example in JS: <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"> And HTML out is: <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-0 jcarousel-item-0-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li> then <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li> then <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li> etc... What I need is that count goes as 0-1-2-3-4-5-etc, but with divide it goes 0-3-6-etc and jCarousel insert blank li's 1-2, 4-5, 7-8. How I can avoid "x" divide inside the loop? Tnak you!

    Read the article

  • Cakephp, JQuery JCarousel Lite, Error

    - by ion
    I am using the following code to make an unordered list into a carousel with jcarousel lite and jquery: <?php echo $this->Html->script(array('jquery-1.4.2.min','jquery.easing.1.1','jcarousellite_1.0.1.pack','jquery.mousewheel.min'), array('inline' => false)); ?> <?php echo $this->Html->scriptStart(array('inline' => false)); ?> $(document).ready(function() { $(".mouseWheelButtons .jCarouselLite").jCarouselLite({ btnNext: ".mouseWheelButtons .next", btnPrev: ".mouseWheelButtons .prev", mouseWheel: true, circular: false, start: 0, visible: 5, easing: "easein" }); }); <?php echo $this->Html->scriptEnd(); ?> However I'm getting the following javascript error in firebug: a[0] is undefined Does anyone know what is causing the error. I am using the packed version of jcarousel lite. The thing is that the code worked in cakephp 1.2 but now i'm using 1.3 and I have updated the syntax using scriptstart, scriptEnd and Html-script.

    Read the article

  • Jquery JCarousel, itemLastInCallback how to change out the controls

    - by TJ Sherrill
    I am new to js and Jquery other than plug and play scripts and plugins. I have Jcarousel running great on a Ruby on Rails site and I need to use the itemLastInCallback method to change out the next and prev buttons. Basically if the end user clicks through to the last item in a carousel, the next button would become a link to the next carousel. <%= link_to (image_tag 'scroll_right.png'), @next_group % is the code I need to render in the end. So something like: if this is not the last item in the carousel button is normal jcarousel next button else <%= link_to (image_tag 'scroll_right.png'), @next_group % end is there a best way to do this? am I on the right track?

    Read the article

  • jQuery detect current thumb and scroll jCarousel accordingly

    - by steve
    Another thanks to SLaks for helping me get the code this far. I'm not quite sure if my last step is even possible with the way I have things set up. A live version of the gallery can be seen here: http://www.studioimbrue.com/index2.php Currently, everything works appropriately. The image and its thumbnail are currently tied together, but the jCarousel itself is still independent. I've added nextThumb.closest('.thumbscontainer').jcarousel('next'); so that when you click the large image, the carousel scrolls to the next row, but that doesn't actually follow any logic. What I'm attempting to do is for jQuery to detect how far down the thumbnail is and when to appropriately scroll the carousel. Is this even possible?

    Read the article

  • jCarousel jQuery ajax loading 1000 records

    - by user1714862
    I'm using jCarousel to present a vertical scolling list of +-1000 names. I am using ajax to load the data 100 records at a time then when all the data has loaded I just let the jCarousel loop in the DOM. I have the ajax and loop all working but would like to make the code work no matter how large the total record count becomes. 1) I'd like to eliminate the 1201 fixed number and use a variable. 2) I currently loop on every record I see (carousel.first) to see if it matches my reload position(s) (albeit the loop is ony 12x it still seems a little "loopy") Any suggestions on improving this? function mycarousel_itemLoadCallback(carousel, state) { //if (carousel.has(carousel.first, carousel.last)) { //return; //} var getCount = 100; // Number of records to grab at a time var maxCount = 1201; // total possible number of records var visible = 9; // the number of records you can see in the window so this creates a pre-load by this number of records for (var i = 1; i < maxCount; i+=getCount ) { if (carousel.first === 1 || carousel.first === (i-visible)){ var getFrom = i; var getTo = getFrom+(getCount-1); //alert('TOP Record ='+carousel.first+'\n Now GET '+getFrom+'-'+getTo); jQuery.get('#ajaxscript#', { first: getFrom, last: getTo }, function(xml) { mycarousel_itemAddCallback(carousel, getFrom, getTo, xml); }, 'xml' ); break; } } };

    Read the article

  • External arrows for jcarousel ?

    - by bob dobbs
    Hi all. I'm creating a slideshow with jcarousel. So far, my slideshow uses most of the defaults for a horizontal slideshow with the tango theme. Can I add an extra "next" and "previous" arrows? I'd like to have them outside of the slideshow container. Is this possible ?

    Read the article

  • jcarousel not working in IE

    - by pradeep
    i have used jcarousel for my slideshow. it does not work in IE http://ratingscorner.com/product_rating.php?alias=Rashtreeya-Vidyalaya-College-of-Engineering-Mysore-Road-Bangalore&product=colleges any help on it.?

    Read the article

  • jQuery Custom Gallery and jCarousel problem

    - by steve
    Active site can be seen here: http://www.studioimbrue.com/index2.php There are currently two small problems with the coding. First: when the page loads and you attempt to click on one of the large images to advance, nothing happens. Once a thumbnail is clicked, the click functionality of the large image comes available. I'm trying to fix it so when the page loads, the user can just start clicking the large image. Second: when an image is clicked, the thumbnail highlight changes. The only problem there is once it gets past 4, the "current" thumbnail needs to be seen, thus the carousel should go to that one. Right now the code for that is nextThumb.closest('.thumbscontainer').jcarousel('next'); but that makes it scroll every time you click. Thanks for any help

    Read the article

  • jcarousel, I need :active state on external controls

    - by TJ Sherrill
    I am running a Jcarousel and I want to add a.active to the current pagination option. I have seen other posts around about this same thing. /** * We use the initCallback callback * to assign functionality to the controls */ function mycarousel_initCallback(carousel) { jQuery('.jcarousel-control a').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); jQuery('#mycarousel-next').bind('click', function() { carousel.next(); return false; }); jQuery('#mycarousel-prev').bind('click', function() { carousel.prev(); return false; }); }; // Ride the carousel... jQuery(document).ready(function() { jQuery("#mycarousel").jcarousel({ scroll: 1, initCallback: mycarousel_initCallback, // This tells jCarousel NOT to autobuild prev/next buttons buttonNextHTML: null, buttonPrevHTML: null }); }); </script> Thats the initialize code and the pagination lives inside: <ul class="jcarousel-control"> <% ([email protected]).each do |n| %> <li><a href="#"> <%= n %></a></li> <% end %> </ul> Its a rails app, so rails is creating the list based on the number of projects in the group. Any ideas? Seems like it should be pretty simple.. But I don't know js at all.

    Read the article

  • jCarousel: Can you remove all items and rebind to a new collection?

    - by Jim G.
    jCarousel documentation states the following: By passing the callback function itemLoadCallback as configuration option, you are able to dynamically create (li) items for the content. {...} jCarousel contains a convenience method add() that can be passed the index of the item to create and the innerHTML string of the item to be created. My Question: Is it possible to remove all items and rebind to a new collection? BTW: I don't necessarily need a "convenience method" to do this. I'm very open to workarounds. FYI: This strategy doesn't seem to work.

    Read the article

  • Prevent Jcarousel from resetting to beginning position on page postback?

    - by lbholland
    I have a nice looking jarousel running from an asp:listview element, with asp:imagebuttons for the images. When clicked, the images in the carousel send the image id to querystring, and the new page is loaded with a larger version of the image and some asp:labels are filled in to describe the image. It looks and works great, except once the page reloads the jcarousel resets to original position, which is confusing to the user. What's the best way to prevent this? I tried using an UpdatePanel but couldn't figure out how to pass the querystring variable with the partial page update. I could pass the variable in a hidden field, but this wouldn't be very SEO friendly.

    Read the article

1 2 3  | Next Page >