Guide/How-To: Setting Up 3d Views Carousel

Despite trying very hard to find some step-by-step guidance on configuring the backend of 3d views carousel module I didn't find any so after finally getting to the bottom of it and working it all out I have decided to put some guidance up in case others are in the same position I was. I think this is the right place to be posting it...

My ultimate aim was to generate a carousel that linked images to specified internal and external urls displayed within pop-up lightboxes. I will go step-by-step through the process although i'll leave it up to you to experiment with the squillions of additional options and also with frontend CSS development to get the look you desire.

I am sure there are better ways of doing this but it worked for me and it could for you, so here goes:

(nb. my urls assume you are using the 'clean urls' module)

Configuring a simple 3d carousel is fairly strait forward. After activating the '3d carousel', 'cck', 'cck image' and 'views' modules, go to http://www.yourdomain.net/admin/content/types/add:

• Enter "carouselpage" in both NAME and TYPE boxes and save the page
• Click on the 'FIELDS' tab at the top
• Enter "carouselimage" in both the "NEW FIELD" and the "FIELD_" boxes then click the first drop-down and select "FILE" and in the second drop-down select "IMAGE". Now click save.
• Go to http://yourdomain.net/admin/content/types/carouselpage/display/basic
• Make sure both drop-downs next to carouselimage are set to 'image linked to node' or 'image'
• Go to http://yourdomain.net/node/add/carouselpage
• Crate a new page with any title you like and upload an image and save it.
• Make atleast two more pages with different images so that we will have a usable carousel to play with.
• Go to http://yourdomain.net/admin/build/views/add:
• enter "carouselview" for the view name and click 'NEXT'
• Click "unformatted" next to STYLE and select "3d carousel"
• Click the plus symbol next to FIELDS. At the bottom find and flag "CONTENT: carouselimage" (making sure it doesn't have either 'data or 'delta' at the end of the title) and click ADD.
• Click the 'none' radio button under LABEL and select the 'FORMAT' drop-down and choose IMAGE. Click UPDATE
• At the top left of the page there is a drop-down under DEFAULTS. Select the drop-down and choose BLOCK.
• Click SAVE (until this point nothing has yet been perminently saved).
• Now go to http://yourdomain.net/admin/build/block/list:
• Under the DISABLED section at the bottom you should see one called CAROUSELVIEW BLOCK. Click it's drop-down and select a block location.

Et voila! You should now have a spinning carousel of your uploaded images.

OK, OK, thats all well and good but how to make these images usable? Right, lets go about adding a link. There are just so many options it would be impossible to list everything here, some much simpler than others but for my requirements I needed to link to specific pages and not nessasarily the ones with the images so I did the following...

• install and activate the 'cck link' module.
• Go to http://yourdomain.net/admin/content/types/carouselpage/fields
• In the NEW FIELD and FIELD_ boxes type "carouselurl" and in both drop-downs select 'LINK'. Click SAVE.
• Go to http://yourdomain.net/admin/content/node/overview and edit each of the carouselpages you created and add a url to each. Try a mix of external and internal links to fully test it.
• Right, now edit your view by going to http://yourdomain.net/admin/build/views/edit/carouselview
• Click the plus symbol next to fields.
• Select 'carouselurl' from the list and click UPDATE and SAVE.
• Now, at this point I'll save you from the headbanging I went through at this stage and tell you that carouselurl MUST come before carouselimage, you can rearrange them by clicking the up/down arrow next to FIELDS.
• Click on CONTENT: CAROUSELIMAGE within the FIELDS box to edit this field.
• Expand and flag the 'output this field as a link' option. For the LINK PATH enter "[field_carouselurl_url]" (including the squared brackets) and for ALT TEXT enter something generic like "link". If you want to open the link in a new tab add '_blank' in the TARGET box.

Your carousel images should now be linking to the sites you setup within each carouselpage.

oki-dokie, now comes the last component of my specific requirement, a way of displaying the linked pages in lightframes. I had assumed it would be nothing more than aphending rel="lightbox" but this didn't seem to work. However I did find a bit of code by a Drupaler named jriedel which I had to modify ever-so-slightly and needs to be entered as a header of the view: (nb. you'll need to have the lightbox2 module installed).
• Go to http://yourdomain.net/admin/build/views/edit/carouselview
• Under basic settings click NONE next to 'header'.
• Expand INPUT FORMAT and select 'php'. If this option is not available you will need to activate the php module built into core.
• Past the following into the box:

<script>
$(document).ready(function() {
$(".views-field-field-carouselimage-fid > .field-content > a").each(function() {
$(this).attr("href", $(this).attr("href") + " ");
$(this).attr("rel", "lightframe");
});
Lightbox.initList() ;
});
</script>

Well, there you have it in it's most basic form. From here I'll leave it up to you to you to tweak and modify to suit your needs:


Ballboy (aka. Gray) ballboy@contactgray.co.uk