I am trying to create multiple rows using Views and jCarousel.
If you take a look at the images i posted, you will see i have no problem using the css to style the carousel, but the moment i open up the theming info in views and see all that php code i get lost.
I'm slowly learning php, but i cant seem to understand how to split the jCarousel content into multiple rows to make a grid 4x3.

if i take out firebug and find the following line:

<ul id="viewscarousel-photo-gallery-page-1" class="jcarousel-processed jcarousel-list jcarousel-list-horizontal" style="width: 2730px; left: 0pt;">

and edit the width to say the with of my carousel 731px or even 1000px it will resize and create 3rows for me.
but where and how am I to implement that correction I have no idea, (its probably not the "correct" way to go about it, but it gives me a result).

Using my Super Genius, I suppose the code should be changed/added in Row style output: views-view-fields.tpl.php
well, im not going to go into any more wild theories as to why and how, i have plenty and tried a lot without success.
The website i am working on is http://www.new.villabuoncristiani.com/gallery

If anyone knows how this could be done or point me in the right direction, ill be forever thankful!
-Nick-

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

CinemaSaville’s picture

I'd also love to use this feature. So if you figure it out, please let me know.

intyms’s picture

Hi !
Here is my solution:

install views_slideshow module.
create a new content type.
add the "cck - image field" to this content type (set the number of images which can be uploaded = 12)
a)then, create a node and upload to it 12 images (this will be the first set of images).
b)then, once again create a node and upload 12 images to it too (this will be the second set of images).

create a view like the one which i have attached to this message.

after that, place a link to the view page here and i will tell you the next steps (we will need to change style.css, and that's all !)

best regards!
Andrew

intyms’s picture

FileSize
74.47 KB

here is the file

intyms’s picture

Status: Active » Fixed

However, if you just want to change the width, then follow these steps:

  • go to /sites/all/themes/VillaBCtransparent/
  • open style.css
  • add to the bottom of the file the following line:
    #viewscarousel-photo-gallery-page-1 {width:800px !important;}

PS if you want a better solution follow the steps described in the second message

Good luck !

rpdesigns’s picture

Hey guys thanks a lot for the input!
I really appreciate it!!! It all works great now thanks again!

found a link as a good example: http://blog.defragmybrain.com/fine-art

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

jazznight17’s picture

hello,

i don't understand the answer of intyms...

you create a view using "slideshow" style (your file) and after you write

add to the bottom of the file the following line:
#viewscarousel-photo-gallery-page-1 {width:800px !important;}


but your view don't use "viewcaroussel" style anymore !?!


i missed a step i think


The question is : how to create multiple rows and columns using Views and jCarousel ?

Best Regards

jazznight17

jasom’s picture

I have same problem http://drupal.org/node/771688

intyms’s picture

//jazznight17
the reply no.2 - is a solution regarding views_slideshow
the reply no.4 - is a solution regarding views_carousel

intyms’s picture

to #8 jasom
try the solution posted in reply no.2

or visit this page for a better solution #484960: Display more than one item at once (grid/table)

maria_zk’s picture

Status: Closed (fixed) » Active

About solution #4. this does indeed override the width, but after some images scroll there will be some white space. Ul remembers the initial width somehow... Any ideas on how to have 2 lines?

konordo’s picture

So here is the thing: If I reduce the width according to comment #4, jcarousel would indeed display multiple rows BUT still auto calculate the initial total width and therefore scrolll to blank. Here is what I did to display multiple rows in a jcarousel:

First, apply this patch http://drupal.org/node/661330 to make the size property available in the views carousel settings (in the views). If the view is configured to return e.g. 50 images, set the size property to half - 25 for two rows, or 1/3 * 50 for three rows etc.
Then, say for example that we have <ul id="viewscarousel-photo-gallery-page-1" class="jcarousel-processed jcarousel-list jcarousel-list-horizontal" style="width: 2730px; left: 0pt;">, edit the css accordingly:

ul#viewscarousel-photo-gallery-page-1 {
width: 1375px; // Half for 2 rows, 1/x*calculated value for X rows etc
}

Now jcarousel will show multiple rows, and still wrap to the last item as expected.

izmeez’s picture

subscribe

rajmataj’s picture

FileSize
2.44 KB

I have been searching a lot for a way to show a grid of nodes (which are images), specifying how many rows and columns to be displayed - and then be able to scroll left or right for more. An example is used in a WordPress theme, called Atlantica (http://atlantica.makedesignnotwar.com/themes/wp/mu/wpmu/ltd-portfolio). The answer, found from a colleague (thanks Amy!), was with using jCarousel Lite as a plugin. Here's what I used to build it:

  • Two pieces of code needed (attached)
    • one is the script that does the heavy lifting itself (found originally here: http://markmail.org/message/f66lffuehaihq7ou)
    • the other file is for use in your $(document).ready(function() function. If you don't have one, use this. The file controls the speed of the animation, plus how many rows and columns you want to show on one page. Don't forget to reference these scripts in your .info file.
  • Using Views (http://drupal.org/project/views), I then create a View of a Page of nodes, showing all as an HTML unordered list.
  • In the same Views Page, add into the header or footer the pager controls: <div class="prev">prev</div><div class="next">next</div>, otherwise you'll have no pager controls for the scrolling.
  • On the generated views page, if your results were like mine, you'll see a vertical list of one column, or perhaps... nothing! This is because you need to alter the second line of the jcarousellite_control.js file to first reference the Views div class, followed by the list class. This essentially tells the page to apply your jquery script to the list to make it scroll. Some other settings are made in the large script itself, where you'll see inline styles applied.

Here is an example of this effect in action: http://bit.ly/dV1KIO

nikhilrdeshpande’s picture

Issue tags: +Grid, +jCarousel Lite

I am looking for similar feature.
I could not implement what you are suggesting.
Can you please elaborate on how to use these files.

rajmataj’s picture

I'm not sure how much more I can elaborate since my instructions were fairly detailed. Did you look through the code on the attached files in the posting? All the changes I made are in them and the Views set up is explained above.

I'm not certain I can help you out but if you can provide more detail on what you're trying to accomplish and what the results are so far, perhaps I can assist.

rajmataj’s picture

Since I've received a question about how to implement this, I've attached my views export to this comment.

For the controls that you wrote in as html in the view (ex: <div class="prev">prev</div>), don't forget to use CSS to place an actual image button onto the page to act as the next and prev controls.

Check out your Theme: Information and rescan the templates if you import this view. I had a slight change which added some a style in to change the background color, but you won't need that.

Hope that helps.

dariomem’s picture

Hi Guys,

I can't seem to implement the solutions you described. As mentioned above, the width seems to be calculated before hand, then when I tweak the css width to Half the automated width by JCarousel I get the desired effect, but have white space....

Anyone found a solution that works and preferably, is scalable?

The page is here:
http://johnbretherton.com/site/views-video-template

Any help would be greatly appreciated!

sharma.amitt16’s picture

Issue summary: View changes

@rajmataj

Thanks. It helps me lot. My view is displaying the grid view with carousel slider but it splits items like In first row there are first 20 items and in second row next 20 item(i.e start from 21 in second row). But I want to top 9 node item on first slide but in current scenario it is not correct. One more thing how to load content by ajax instead of loading all content at the page loading. Please suggest me any solution.

Thanks
Amit