Gallery larger image

128 Posts

evegate94 Reply #1, 13 years, 7 months ago

If I have a gallery of thumbnails with a larger box above. Is there a way to have it set so when a thumbnail is clicked the image appears in the bigger box above? Probably something to do with a target?

See attached

211 Posts

Nir Zohar Reply #2, 13 years, 7 months ago

see this example - http://rtfm.modx.com/display/ADDON/Gallery.Setting+Up+Your+Gallery

128 Posts

evegate94 Reply #3, 13 years, 7 months ago

Thanks for that, it does appear to do what I want but it places the image below the thumbnail. I've tried a wide variety of moving the code to get it to put the larger image in my existing box. Attached is what it is doing.

Here's my code:

<div class="slider-wrapper">
                        <div class="slider">
                            <ul class="items">
<li>

</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>    

<section id="content"><div class="ic"></div>
        <div class="main">
            <div class="wrapper img-indent-bot">

<article class="col-1">
<img class="img-border" src="assets/images/banner-1.jpg" alt="">                
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-4.jpg" alt="">              
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-5.jpg" alt="">                
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-2.jpg" alt="">                
</article>
                
<article class="col-2">
<img class="img-border" src="assets/images/banner-3.jpg" alt="">                
</article>

<div class="wrapper">
            	<article class="column-1">
                	<div class="indent-left">
                        <div class="maxheight indent-bot">
                            <h3 class="p1">Stock fencing</h3>
                        <h6 class="p2">If you need to patch up an existing stock fence or install new stock proof fencing then ask us about our services before you go anywhere else.</h6>
                      <p class="p2">We can fit a full range of stock fencing wire, posts, staples and stakes.</p>
                        </div>
                    </div>
                </article>


                <article class="column-2">
                	<div class="maxheight indent-bot">


<ul>
[[Gallery? &album=`Stock`]]
</ul>
</div>
 
 

 
<hr />
 
[[!GalleryItem]]
[[!+galitem.image:notempty=`
<div class="image">
  <a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" /></a>
  <br />Albums: [[+galitem.albums]]
</div>
`]]
                </article>

I thought maybe using &toPlaceholder=`gallery` and placing [[+gallery]] in the items <li> but it appears placing the code above the gallery code doesn't work. What do I need to do to get it to work?

128 Posts

evegate94 Reply #4, 13 years, 7 months ago

This is the code that I thought might work but it doesn't display the image:

<div class="slider-wrapper">
                        <div class="slider">
[[+gallery]]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>    

<section id="content"><div class="ic"></div>
        <div class="main">
            <div class="wrapper img-indent-bot">

<article class="col-1">
<img class="img-border" src="assets/images/banner-1.jpg" alt="">                
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-4.jpg" alt="">              
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-5.jpg" alt="">                
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-2.jpg" alt="">                
</article>
                
<article class="col-2">
<img class="img-border" src="assets/images/banner-3.jpg" alt="">                
</article>

<div class="wrapper">
            	<article class="column-1">
                	<div class="indent-left">
                        <div class="maxheight indent-bot">
                            <h3 class="p1">Stock fencing</h3>
                        <h6 class="p2">If you need to patch up an existing stock fence or install new stock proof fencing then ask us about our services before you go anywhere else.</h6>
                      <p class="p2">We can fit a full range of stock fencing wire, posts, staples and stakes.</p>
                        </div>
                    </div>
                </article>


                <article class="column-2">
                	<div class="maxheight indent-bot">


<ul>
[[Gallery? &album=`Stock`]]
</ul>
</div>
 
 

 
<hr />
 
[[!GalleryItem &toPlaceholder=`gallery`]]
[[!+galitem.image:notempty=`
<div class="image">
  <a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" /></a>
  <br />[[+galitem.description]]
</div>
`]]

                </article>


            </div>
        </div>
    </section>

If I put the placeholder on the gallery call the thumbnails will display in the box so not sure what this wouldn't work.

211 Posts

Nir Zohar Reply #5, 13 years, 7 months ago

You could also try the galleriffic plugin, and then just sort the look with css.
I think it does everything you are trying to accomplish.
http://rtfm.modx.com/display/ADDON/Gallery.Plugins.Galleriffic

128 Posts

evegate94 Reply #6, 13 years, 6 months ago

I'm now using galleriffic which works fine but I can't work out how to set the large image to appear in the main box not separate above the thumbnails. Here's the code I currently have which displays both thumbnails and large image in [[+gallery]]. In firebug I believe its the slideshow-container, how do I specify it to go in the slider div?

<div class="slider-wrapper">
                        <div class="slider">

                                    [[!Gallery?
   &album=`Stock`
   &plugin=`galleriffic`
   &renderNavControls=`0`
   &renderSSControls=`0`
   &toPlaceholder=`gallery`

]]
                               
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>    

<section id="content"><div class="ic"></div>
        <div class="main">
            <div class="wrapper img-indent-bot">

<article class="col-1">
<img class="img-border" src="assets/images/banner-1.jpg" alt="">                
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-4.jpg" alt="">              
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-5.jpg" alt="">                
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-2.jpg" alt="">                
</article>
                
<article class="col-2">
<img class="img-border" src="assets/images/banner-3.jpg" alt="">                
</article>

<div class="wrapper">
            	<article class="column-1">
                	<div class="indent-left">
                        <div class="maxheight indent-bot">
                            <h3 class="p1">Stock fencing</h3>
                        <h6 class="p2">If you need to patch up an existing stock fence or install new stock proof fencing then ask us about our services before you go anywhere else.</h6>
                      <p class="p2">We can fit a full range of stock fencing wire, posts, staples and stakes.</p>
                        </div>
                    </div>
                </article>


                <article class="column-2">
                	<div class="maxheight indent-bot">


<ul>
[[+gallery]]
</ul>
</div>
 



 
<hr />
 


                </article>

128 Posts

evegate94 Reply #7, 13 years, 6 months ago

I've worked out how to get it to work, just need to tidy up the css but there's 3 things I need to do but can't figure out.
1. Set an image to appear in the box on loading of page so that it's not empty
2. Set the width of the large image to fill the box
3. Add a caption to each thumbnail image

Here's my current code

<div class="slider-wrapper">
                        <div class="Slider">
[[!GalleryItem]]
[[!+galitem.image:notempty=`
<div class="image">
  <a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" /></a>
</div>
`]]
 
<hr />

 
                               
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>    

<section id="content"><div class="ic"></div>
        <div class="main">
            <div class="wrapper img-indent-bot">

<article class="col-1">
<img class="img-border" src="assets/images/banner-1.jpg" alt="">                
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-4.jpg" alt="">              
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-5.jpg" alt="">                
</article>
                
<article class="col-1">
<img class="img-border" src="assets/images/banner-2.jpg" alt="">                
</article>
                
<article class="col-2">
<img class="img-border" src="assets/images/banner-3.jpg" alt="">                
</article>

<div class="wrapper">
            	<article class="column-1">
                	<div class="indent-left">
                        <div class="maxheight indent-bot">
                            <h3 class="p1">Stock fencing</h3>
                        <h6 class="p2">If you need to patch up an existing stock fence or install new stock proof fencing then ask us about our services before you go anywhere else.</h6>
                      <p class="p2">We can fit a full range of stock fencing wire, posts, staples and stakes.</p>
                        </div>
                    </div>
                </article>


                <article class="column-2">
                	<div class="maxheight indent-bot">


<ul>
[[!Gallery? &album=`Stock` &toPlaceholder=`gallery`]]
<h1><a href="[[~[[*id]] &galAlbum=`[[+gallery.id]]`]]"></a></h1>

[[+gallery]]

128 Posts

evegate94 Reply #8, 13 years, 6 months ago

I've solved the width and the caption just to find out how to display large picture on loading of page instead of first click on thumbnail

5 Posts

robynrhd Reply #9, 13 years ago

Quote from: evegate94 at Mar 08, 2013, 03:21 AM

I've solved the width and the caption just to find out how to display large picture on loading of page instead of first click on thumbnail

Hi, would love to know how you got the thumbnail caption to work? Thanks, Robyn

128 Posts

evegate94 Reply #10, 13 years ago

Hi robynnrhd, here is the code I used:

[[!GalleryItem?]]

[[!+galitem.image:notempty=`
<div class="largeImage">
  <a href="[[+galitem.image]]"><img class="[[+galitem.imgCls]]" src="[[+galitem.image]]" alt="[[+galitem.name]]" /></a>
</div>
`]]


[[!Gallery?
   &toPlaceholder=`gallery`
   &album=`Stock`
   &thumbTpl=`NewGalleryThumb` 
   &thumbWidth=`150`
]]
[[+gallery]]

NewGalleryThumb:

<div class="galleryContainer">
<div class="[[+cls]]">
    <a href="[[+linkToImage:if=`[[+linkToImage]]`:is=`1`:then=`[[+image_absolute]]`:else=`[[~[[*id]]?
            &[[+imageGetParam]]=`[[+id]]`
            &[[+albumRequestVar]]=`[[+album]]`
            &[[+tagRequestVar]]=`[[+tag]]` ]]`]]">
 
        <img class="[[+imgCls]]" src="[[+fileurl:phpthumbof=`w=160&h=100&zc=1`]]" alt="[[+name]]" />
    </a>
<h1>[[+description]]</h1>
</div>
</div>

It's the [[+description]] that adds the caption.

Attached is how my gallery now looks