6

I'm using D7, Views 3, and am playing around with using jQuery Cycle. What I would like to do is amend my view output so it's like in this example from the jQuery Cycle website:

    <div style="margin:auto;text-align:center"><div id="nav"></div></div>
<div class="slideshow">
    <div class="slide">
        <img src="http://jquery.malsup.com/cycle/images/beach1.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach2.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach3.jpg" width="200" height="200" />
    </div>
    <div class="slide">
        <img src="http://jquery.malsup.com/cycle/images/beach4.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach5.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach6.jpg" width="200" height="200" />
    </div>
    <div class="slide">
        <img src="http://jquery.malsup.com/cycle/images/beach7.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach8.jpg" width="200" height="200" />
        <img src="http://jquery.malsup.com/cycle/images/beach9.jpg" width="200" height="200" />
    </div>
</div>

I was hoping to use Semantic Views for this but I'm stuck on how to wrap the div class "slide" around every 3 items. Is it possible to do this? I only seem to be able to apply a div to every item and then apply the class to every 3rd item. Any help/guidance/tips much appreciated.

Improve this question
1

4 Answers 4

Reset to default
4

In the View, there is a Theme: Information Link under the Advanced Tab. There you can theme your view with template files the way you like.

Improve this answer
2
  • Thanks for your answer whitefleaCH. I have been overriding the template file for display output and managed to get the output displayed as one row with the "slideshow" div encompassing it, but I can't quite work out how to have the div class "slide" encompass every 3 items. I have added a field - "Global: View result counter" and set it to hidden, so each item is numbered. I just now need to work out how to get at that number (in the row style tpl file?) so I can then perform modulus logic on it. My thinking is that I'll somehow be able to use that modulus to print a div round every 3 items
    – Mark G
    Commented Nov 3, 2011 at 20:03
  • 1
    I think you want the "Style output" instead of the "Row Style output" template. There's a foreach loop where you can simply implement a counter in and Modulus it by 3. If you get 0 then you're on the first row of every 3 rows, if you get 2 you're on the 3rd row of every 3 rows (if your counter started at 0). And simply implement if($i % 3 == 0){ print '<div class="slide">'; } before and if($i % 3 == 2){ print '</div>'; } after the <?php print $row; ?> line. You still may need to modify the row style if you want just <img> tags
    – Beebee
    Commented Apr 2, 2012 at 8:15
2

Take the html list template and change the views-view-list.tpl.php. Check the theme information to see the names you can give.

<?php
/**
 * @file views-view-list.tpl.php
 * Default simple view template to display a list of rows.
 *
 * - $title : The title of this group of rows.  May be empty.
 * - $options['type'] will either be ul or ol.
 * @ingroup views_templates
 */
?>
<?php print $wrapper_prefix; ?>
  <?php if (!empty($title)) : ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <?php print $list_type_prefix; ?>
    <?php foreach ($rows as $id => $row): ?>
      <?php if($id % 3 == 0){ print '<div class="row">'; } ?>
      <li class="<?php print $classes_array[$id]; ?>"><?php print $row; ?></li>
      <?php if($id % 3 == 2){ print '</div>'; } ?>
    <?php endforeach; ?>
  <?php print $list_type_suffix; ?>
<?php print $wrapper_suffix; ?>
Improve this answer
1

The simplest way to do this is have a node with an image field that only allows for three 3 images.

In views you can add that field and specify "Display all values in the same row" and each node will display all of it's images in one row. This will allow you to add the class "slide" to each row and "slideshow" to the div surrounding the view.

enter image description here

If you want to do this with one node per image you will need to create your own row template and own preprocess function for that template. In the preprocess function you can loop through the fields (which will contain one image per row) creating a multidimensional array that contains 3 values for each key. In the template you can loop through those values adding 3 images inside each "slide" div.

Improve this answer
0

Be sure to look at the Views Column Class module.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.