Can someone please show me how to convert this jquery gallery to EE using matrix?

#1 / Dec 10, 2011 5:55am

Stefani Ann

35 posts

New to matrix - and new to javascripting! I want to have the thumbs down the bottom, then you click on them and it changes the large image in the large box on the page.

The problem I am having is that I dont know how to make all the images correspond, and unless i add limit=“1” it seems to break the gallery and run off down the page repeating over and over, but I want more than one thumbnail appearing in the thumbnail area!

This is the gallery I want to use:

<div class="gallery_sec">
<div id="slider2" class="gallery_cont">

<div class="contentdiv">
<a href="http://images/big1.gif%22rel=%22example_group" rel="example_group" title="section1">images/big1.gif</a>
</div>

<div class="contentdiv">
<a href="http://images/big2.gif%22rel=%22example_group" rel="example_group" title="section2">images/big2.gif</a>
</div>
                        
<div class="contentdiv">
<a href="http://images/big3.gif%22rel=%22example_group" rel="example_group" title="section3">images/big3.gif</a>
</div>
                        
<div class="contentdiv">
<a href="http://images/big1.gif%22rel=%22example_group" rel="example_group" title="section4">images/big1.gif</a>
</div>
</div>


<div class="scrollingunit">
<a href="#" class="prevgallery"> </a>
<div class="anyClass" id="paginate-slider2">
<ul>
<li><a href="#" class="toc">images/thumb1.gif</a></li>
<li><a href="#" class="toc">images/thumb2.gif</a></li>
<li><a href="#" class="toc">images/thumb3.gif</a></li>
<li><a href="#" class="toc">images/thumb1.gif</a></li>
<li><a href="#" class="toc">images/thumb2.gif</a></li>
</div>
<a href="#" class="nextgallery"> </a>
</div>
[removed][removed]
</div>

This is what I have tried:

{exp:channel:entries channel="products"}
{product_variation_gallery}
   <div class="gallery_sec">
   <div id="slider2" class="gallery_cont">
   <div class="contentdiv">
   <a href="http://images/big1.gif%22rel=%22example_group" rel="example_group" title="section1">{color_variation}</a>
   </div>
   </div>
{/product_variation_gallery}
{/exp:channel:entries}

{exp:channel:entries channel="products"}
{product_variation_gallery limit="1"}
<div class="scrollingunit">
 <a href="#" class="prevgallery"> </a>
 <div class="anyClass" id="paginate-slider2">
 <ul>
 <li><a href="#" class="toc">{color_variation_thumb}</a></li>
 </ul>
 </div>
<a href="#" class="nextgallery"> </a>
</div>
[removed][removed]
{/product_variation_gallery}
{/exp:channel:entries}

If anyone can help me out that would be great.
Thanks

#2 / Dec 10, 2011 7:00am

Carter Digital

18 posts

Hey there

Assuming that your matrix field is setup something like:
Color variant | Color variant thumb

Then try

{exp:channel:entries channel="products"}

<div class="gallery_sec">
 <div id="slider2" class="gallery_cont">
  {product_variation_gallery}
  <div class="contentdiv">
   <a href="http://{color_variation}%22rel=%22example_group" rel="example_group" title="section1">{color_variation}</a>
  </div>
  {/product_variation_gallery}
 </div>


 <div class="scrollingunit">
  <a href="#" class="prevgallery"> </a>
  <div class="anyClass" id="paginate-slider2">
   <ul>
    {product_variation_gallery}
    <li><a href="#" class="toc">{color_variation_thumb}</a></li>
    {/product_variation_gallery} 
   </ul>
  </div>
  <a href="#" class="nextgallery"> </a>
 </div>
 
</div>  
{/exp:channel:entries}

#3 / Dec 10, 2011 7:38am

Stefani Ann
35 posts

Hi,
Yes i have been trying various combos for the last two hours - including your suggestion. It makes sense but its just not working, it doesnt matter where i put the tags, no combination seems to work.

I reverted back to the original basic html file, all was working, there are no script errors. Its when you start putting in the EE variable that it all goes haywire.

I just cant work it out!
#4 / Dec 10, 2011 8:06am

Stefani Ann
35 posts

I have made some progress… I moved the sc*ipt line into the head - its now close to working - everything is in its place, only when you click on the thumbnail, it links to the image on a blank webpage - does not swap out. Does anyone know why that would be? Thanks
#5 / Dec 11, 2011 4:13pm

ahmad saad
364 posts

if u can attach your html& js files so I can help u

#6 / Dec 11, 2011 8:16pm

Stefani Ann

35 posts

Ok so here is my product detail template: ( i have made some changes) - seems to have most of it working now… the only bit im stuck on is how to get the little “next thumbanil” buttons to scroll through in the thumbnail slider. ALso, it seems to be reloading the whole page - is there a way to avoid this?

{exp:channel:entries channel="product" url_title="{segment_3}"}
  <div class="gallery_sec">
      <div id="slider2" class="gallery_cont">
   {product_variation_gallery row_id="{segment_4}"}
                        <div class="contentdiv">
                            <a href="#%22rel=%22example_group" rel="example_group" title="section1">{product_large}</a>
                        </div>
   {/product_variation_gallery}
                        </div>
  {/exp:channel:entries}


                <div class="scrollingunit">

   {exp:channel:entries channel="product"}

   {product_variation_gallery row_id="{segment_4}"}
                        <a href="http://{path=%27store/product_detail_test_slider/{url_title}/{row_id}}" class="prevgallery"> </a>
                        <div class="anyClass" id="paginate-slider2">

          <ul>
                           <li><a href="http://{path=%27store/product_detail_test_slider/{url_title}/{row_id}}" class="toc">{color_swatch}</a></li>
                        </ul>
   

   <a href="http://{path=%27store/product_detail_test_slider/{url_title}/{row_id}}" class="nextgallery"> </a>

   {/product_variation_gallery}
   {/exp:channel:entries}
  </div>

And here is the JavaSc*ipt for the gallery:

featuredcontentslider.init({
                        id: "slider2",  //id of main slider DIV
                        contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
                        toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
                        nextprev: ["Previous", "Next"],

Thanks.😊

Thread

Stefani Ann

Carter Digital

Stefani Ann

Stefani Ann

ahmad saad

Stefani Ann

Username

Password

Thread