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-
Comment | File | Size | Author |
---|---|---|---|
#17 | Portfolio_jCarosel_view_export.txt | 3.32 KB | rajmataj |
#14 | jcarousellite_grid.zip | 2.44 KB | rajmataj |
#3 | md.png | 74.47 KB | intyms |
views2.jpg | 331.68 KB | rpdesigns | |
views1.jpg | 294.85 KB | rpdesigns |
Comments
Comment #1
CinemaSaville CreditAttribution: CinemaSaville commentedI'd also love to use this feature. So if you figure it out, please let me know.
Comment #2
intyms CreditAttribution: intyms commentedHi !
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
Comment #3
intyms CreditAttribution: intyms commentedhere is the file
Comment #4
intyms CreditAttribution: intyms commentedHowever, if you just want to change the width, then follow these steps:
#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 !
Comment #5
rpdesigns CreditAttribution: rpdesigns commentedHey 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
Comment #7
jazznight17 CreditAttribution: jazznight17 commentedhello,
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
Comment #8
jasom CreditAttribution: jasom commentedI have same problem http://drupal.org/node/771688
Comment #9
intyms CreditAttribution: intyms commented//jazznight17
the reply no.2 - is a solution regarding views_slideshow
the reply no.4 - is a solution regarding views_carousel
Comment #10
intyms CreditAttribution: intyms commentedto #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)
Comment #11
maria_zk CreditAttribution: maria_zk commentedAbout 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?
Comment #12
konordo CreditAttribution: konordo commentedSo 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.
Comment #13
izmeez CreditAttribution: izmeez commentedsubscribe
Comment #14
rajmataj CreditAttribution: rajmataj commentedI 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:
$(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.<div class="prev">prev</div><div class="next">next</div>
, otherwise you'll have no pager controls for the scrolling.Here is an example of this effect in action: http://bit.ly/dV1KIO
Comment #15
nikhilrdeshpande CreditAttribution: nikhilrdeshpande commentedI am looking for similar feature.
I could not implement what you are suggesting.
Can you please elaborate on how to use these files.
Comment #16
rajmataj CreditAttribution: rajmataj commentedI'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.
Comment #17
rajmataj CreditAttribution: rajmataj commentedSince 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.
Comment #18
dariomem CreditAttribution: dariomem commentedHi 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!
Comment #19
sharma.amitt16 CreditAttribution: sharma.amitt16 commented@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