Jump to:

23368 Posts in 18143 Topics by 2863 members

General Questions

SilverStripe Forums » General Questions » Lightbox - only display the 1st image of a group

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1282 Views
  • NinjaJin
    Avatar
    Community Member
    5 Posts

    Lightbox - only display the 1st image of a group Link to this post

    Hello everyone,

    Ok... I'm having a bit of trouble to get the template work like the way I wanted. I have searched throught the forum but can not find the anwser

    What i'm Trying to do is only display the 1st image within a group (have the same "rel" value), So the image2, image 3 within the same rel would not show unless the Lightbox is open - so you can click on through .

    The codes are below:

    In the ServicePage.php

    static $has_many = array (
    'Images' => 'ServicePagePhoto'
    );

    public function getCMSFields()
    {
    $f = parent::getCMSFields();
    $manager = new ImageDataObjectManager(
    $this, // Controller
    'Images', // Source name
    'ServicePagePhoto', // Source class
    'Attachment', // File name on DataObject
    array(
    'Title' => 'Title',
    'Description' => 'Description',
    'Group' =>'Group',
    ), // Headings
    'getCMSFields_forPopup' // Detail fields
    // Filter clause
    // Sort clause
    // Join clause
    );
    $f->addFieldToTab("Root.Content.Photo",$manager);
    return $f;
    }

    In the ServicePage.ss

    <div id="slider" class="mb-slider">
    <% control Images %>
    <div>
    <a class="lightbox" title="$Title" rel="$Group" href="$Attachment.URL">
    $Attachment
    </a>
    <br />
    <h3>{$Title}</h3>
    <br />
    <p>$Description</p>
    <!----a image2, image3, image 4-->
    </div>
    <% end_control %>
    </div>

    HTML example

    <div>
    <a href="images/service/door-1.jpg" rel="group1" title="" class="lightbox"> //---This loads first when the lightbox is open up
    <img src="images/service/door-big-1.jpg" /> //--- photo displaying (area)
    </a>
    <a href="images/service/door-2.jpg" class="lightbox" rel="group1" title=""></a> //---This loads second when the lightbox is open up
    <br>
    <h3>Door Repaint and Stained<br>
    <p>Work was performed in a heritage house located in North Adelaide.</p>
    </div> //---Group 1

    <div>
    <a href="images/service/door-3.jpg" rel="group2" title="" class="lightbox">
    <img src="images/service/door-big-2.jpg" />
    </a>
    <a href="images/service/door-4.jpg" class="lightbox" rel="group2" title=""></a>
    <br>
    <h3>Door Repair and Repaint</h3>
    <p>Main Entry door repainted - Mile End.</p>
    </div> //---Group 2

    I'm not good at coding and am very new - Yes, an newbie? it would be great If anybody can give me some ideas on this. It has been stuck on my head for weeks...

    Thankyou!!

  • grumpypanda
    Avatar
    Community Member
    32 Posts

    Re: Lightbox - only display the 1st image of a group Link to this post

    Hi, I think this may give you some ideas, that's how I've got my gallery working. http://www.silverstripe.org/dataobjectmanager-module-forum/show/13085

  • NinjaJin
    Avatar
    Community Member
    5 Posts

    Re: Lightbox - only display the 1st image of a group Link to this post

    Hi SamIAm,

    Thanks for the link!! I did put the tag <% if First %> but didn't help - I think the way I do it is not the right way... the worest case is do this static.. html way

    It's currently look like this,

    http://www.broadhurstproperty.com.au/our-services/

    When you click on the picture, the first image is showing in the lightbox, which is not what I wanted...

    Still thinking how to make it work...

  • grumpypanda
    Avatar
    Community Member
    32 Posts

    Re: Lightbox - only display the 1st image of a group Link to this post

    Hi NinjaJin,

    Sorry I haven't been back here for a while. I'm sure there will be a way to achieve what you want to do. I would suggest you to post a new question or be more specific on your question. Sometimes I wait for ages to get a reply.

    However I would start to implement the SS to your html step by step if this is my project, and may do some related tutorial on the way if needed.

    I'm afraid I'm unable to help you but I hope some other people may be able to give you a hand. Good luck.

    Cheers
    Sam

    1282 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.