Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

Lightbox - only display the 1st image of a group


Go to End


4 Posts   2714 Views

Avatar
NinjaJin

Community Member, 5 Posts

5 March 2012 at 10:57pm

Edited: 05/03/2012 11:08pm

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!!

Avatar
grumpypanda

Community Member, 32 Posts

23 March 2012 at 11:16am

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

Avatar
NinjaJin

Community Member, 5 Posts

23 March 2012 at 6:42pm

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...

Avatar
grumpypanda

Community Member, 32 Posts

5 April 2012 at 11:36am

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