How to use matrix in a javascript gallery slider

Edit Subject

Also, id like to do the Gallery Tutorial, but it requires you have the ED Imageresizer plugin - which is not compatible with MSM, which I am running.... is there a tutorial for MSM users?

Hi Stephanie,

Can you post your template code, the way it was before you added in the Matrix tags, as well as what it looks like now with the Matrix tags?

Post the code within <pre><code> and </code></pre> tags so that it displays correctly.

As for your second question, you can swap out ED Imageresizer for CE Image, which also handles image resizing, and works with MSM.

Hello, I need some help with this gallery slider:



Here is a picture of the code:



and this is the javas*ript file:



It is working ok in that the images are swapping out but i have two problems:

1. the whole page reloads, when it swaps out and
2. there are more than three color variations, but the thumbnail slider down the bottom wont load the others, only the three that are there - Im not sure how to code the "next" buttons.

Any help much appreciated thanks.

This reply was created from a merged topic originally titled
I need help with this javacsript gallery -.

I have implemented a javascript gallery into an ecommerce site on the "product detail view page" - I have changed a few little things from the above posting. To clarify, the purpose of this gallery is to show the different color variations available to the specific product being looked at.

The images are loading okay now - im not sure what ive done differently though...

The images need to preload as there is a lag and it flicks:

the code is:

{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 rel="example_group" href="{image_xx_large}" title="section1"><img src="{image_xx_large}" alt="" /></a>

                        </div>

   {/product_variation_gallery}

                </div>

  {/exp:channel:entries}


   <div class="scrollingunit">

                        <a href="#" class="prevgallery">&nbsp;</a>

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


                        <div class="anyClass" id="paginate-slider2">


                        <ul>

    {product_variation_gallery row_id="{segment_4}"}

                                <li><a href="#" class="toc"><img src="{image_xx_thumb}" alt="" /></a></li>

    {/product_variation_gallery}

                        </ul>


                        </div>


                        <a href="#" class="nextgallery">&nbsp;</a>

                    </div>

  {/exp:channel:entries}

and the javascript is

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"],  //labels for "prev" and "next" links. Set to "" to hide.

                        revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"

                        enablefade: [true, 0.2],  //[true/false, fadedegree]

                        autorotate: [false, 3000],  //[true/false, pausetime]

                        onChange: function(previndex, curindex){  //event handler fired whenever script changes slide

                            //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)

                            //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)

                        }

                    })

I have placed the javascript down the bottom of my page.

I have read that the way to preload images into a gallery like this would involve adding some scripting lines such as :

$('<img />')

    .attr('src', 'imageURL.jpg')

    .load(function(){

        $('.profile').append( $(this) );

        // Your other custom code

    });

... my question is - if the image file names are generated dynamically ( via matrix) - how can I explicitly list all of the image file names in the javascript preload? The number of matrix rows will differ for each product depending on how many color variations are available, and also I cant name images the same names for different products, but it doesnt seem feasible or make sense to specify every possible filename in the preload script - the whole process of adding images wont be dynamic anymore - but you can't put EE tags into javascript files (can you)?

how is this normally done?

Thank you!
Stumped.

Also, is my use of

   {product_variation_gallery row_id="{segment_4}"}

correct?

Or should it be:

   {product_variation_gallery row_id="{row_id}"}

i noticed this was used in the example, but im not really sure what it does...

I wouldn’t worry about preloading right now. Let’s just get the actual slider working.

So, looks like you’re using this script, right? http://www.dynamicdrive.com/dynamicin...

This is probably the markup and JS you’re after:

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

  <div class="gallery_sec">

    <div id="product_variation_gallery{entry_id}" class="gallery_cont">

      {product_variation_gallery}

        <div class="contentdiv">

          <a rel="example_group" href="{image_xx_large}" title="section1"><img src="{image_xx_large}" alt="" /></a>

        </div>

      {/product_variation_gallery}

    </div>

    <div id="paginate-product_variation_gallery{entry_id}" class="anyClass">

      <a href="#" class="prev">&nbsp;</a>

      <ul>

        {product_variation_gallery}

          <li><a href="#" class="toc"><img src="{image_xx_thumb}" alt="" /></a></li>

        {/product_variation_gallery}

      </ul>

      <a href="#" class="next">&nbsp;</a>

    </div>

  </div>

  <script type="text/javascript">

    featuredcontentslider.init({

      id: "product_variation_gallery{entry_id}",

      contentsource: ["inline", ""],

      toc: "markup",

      nextprev: ["Previous", "Next"],

      revealtype: "click",

      enablefade: [true, 0.2],

      autorotate: [false, 3000],

      onChange: function(){}

    });

  </script>

{/exp:channel:entries}

Here's what I changed:

• You had two identical {exp:channel:entries} tags next to each other for no apparent reason, so I removed the first closing {/exp:channel:entries} tag and second opening {exp:channel:entries} tag.


• Since this is a JS gallery, there’s no need for limiting the Matrix output to a single row, so I removed the row_id= params from your Matrix tags


• In case you ever want to have multiple of these galleries on the same page, I changed the ID of the gallery to "product_variation_gallery{entry_id}", and moved the JS up into the {exp:channel:entries} tag pair. (So, remove it from the bottom of your page.)


• Not sure what that <div class="scrollingunit"> did, so for the sake of keeping the code bare-bones, I removed it.


• Prev and Next links are now inside <div id="paginate-slider{entry_id}"> and I changed their classes to "prev" and "next", which is what the script is looking for.