0

Background I am using Drupal 7 and I have a taxonomy "Kitchen Type" and content type "Kitchen Picture" having default field_image for images. There are three Kitchen Types Traditional, Contemporary and Transitional. I have more than 10 Kitchen Pictures assigned to each Kitchen Type.

Problem I have a view at /kitchens (Page 1) that lists three kitchen types and when clicked, lists the Kitchen pictures (another dynamic view) (Page 2). When a picture is clicked a lightbox open up. But, I would like to have a lightbox open up with kitchen Pictures (including next-back navigation) when any of the kitchen type (traditional etc) is clicked. So, I want to skip Page 2 actually. I have no idea how to go about it. Any help would be appreciated.

Edited I am afraid I also have a link in the header "Kitchen Portfolio" that supposed to open a lightbox and allows visitor to navigate through all the kitchen pictures. I want to avoid loading all the images on all pages. I need a way out such as when link is clicked it loads the html and start lightbox navigation. I do not know how I can achieve it in Drupal.

I already have lightbox2 installed.

Thanks

0

If I were you I would create a "Kitchen Type" content type and then edit the image field to allow unlimited amount of images. Then add a taxonomy field to "Kitchen Type" assigning a taxonomy term to each.

Create a new view which pulls all "Kitchen Type" content types and add the Taxonomy Field and Image field to the display. Views allows you to style individual fields by its tpl naming convention. If you go to the "theme" option in that view you will see a set of file names to place in your theme to style individual fields. You will need to style the image field by looping through the image array and output html which conforms to the lightbox2 convention like this:

<div class="image-set">
    <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward.">
        <img class="example-image" src="img/demopage/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150">
    </a>
    <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" title="Alternately you can press the right arrow key.">
        <img class="example-image" src="img/demopage/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" width="150" height="150">
    </a>
    <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" title="The script preloads the next image in the set as you're viewing.">
        <img class="example-image" src="img/demopage/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" width="150" height="150">
    </a>
    <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" title="Click the X or anywhere outside the image to close">
        <img class="example-image" src="img/demopage/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" width="150" height="150">
    </a>
</div>

This should display each set of images for each kitchen type right under it. Once one image is clicked it should open up a lightbox with arrows to go to next image.

Hope this helps or at least points you in the right direction!

  • That sounds like a good plan. But avoided unlimited images because every image would have a caption. Secondly, I believe, putting more than 40 images in one page increase page load time. I am afraid I also have a link in the header "Kitchen Portfolio" that supposed to open a lightbox and allows visitor to navigate through all the kitchen pictures. There in this case, we have to load all the images on all the pages. – FatalError Jul 5 '13 at 21:27
  • Please read out the Edited part of the question. – FatalError Jul 5 '13 at 21:31
  • In order for lightbox to display a gallery the images have to be in the markup already (hidden or not). Otherwise, if you are trying to avoid putting all of them on the page, you have to set up some sort of AJAX service to your backend to load the images on click. I don't believe lightbox does this. – amamut Jul 6 '13 at 0:11
  • Yeah, I think the same, I believe, I have to fetch the markup first when link is clicked an start the slideshow. It would all be custom coded. – FatalError Jul 8 '13 at 12:51
0

Here is how I implemented it

  1. Created a block view to display empty links of all "Kitchen Pictures" images

    • Added Content:Body, Content: Kitchen Type and Field:Image
    • Field Image Settings

      • Uncheck create a label, Set Formatter as "Image URL"
      • Set "Link image url" to "Nothing"
      • "Rewrite Result" => Check "Rewrite the output of this field" and paste following code.

      <a href="[field_image]" rel="lightshow[[field_kitchen_type]]" title="[body]" class="[field_kitchen_type] portfolio_kitchen_pic"></a>

    • Content:Body and Content:Kitchen Type Settings

      • Uncheck Create a label
      • Check Exclude from Display
      • Set Formatter to "Plain text"
  2. Place the above created block in footer and use CSS to make it hidden (i.e. display:none)

  3. To start lightbox of all images, I then used following JS function and applied to "onclick" of the "Portfolio" link.

    function start_portfolio_slidshow()
    {
       jQuery('a.portfolio_kpic').each(function(){
          title = jQuery(this).attr('title');
    
          rel = 'lightshow[portfolio]['+title+']';
          jQuery(this).attr('rel',rel);
    
          Lightbox.initList();
          Lightbox.triggerLightbox('lightshow', 'portfolio');
    
       });
       return false;
    }
    
  4. To start lightbox of each kitchen-type (category). I implemented following functions

    function start_kitchen_slidshow(event)
    {
        type = event.data.type.toUpperCase();
    
        jQuery('a.portfolio_kpic.'+type).each(function(){
            title = jQuery(this).attr('title');
    
            rel = 'lightshow['+type+']['+title+']';
            jQuery(this).attr('rel',rel);
    
            Lightbox.initList();
            Lightbox.triggerLightbox('lightshow', type);
    
        });
        return false;
    }
    

Which is implemented to links like following (in jQuery(document).ready)

    $('a.lightbox_portfolio_kitchen').each(function(){
       $(this).bind('click', {type: $(this).attr('rel')}, start_kitchen_slidshow);
    });

Note: Links should have "lightbox_portfolio_kitchen" with category name in its "rel" attribute.

There may be some other solutions but this one worked for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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