grid slider not working as a snipet

#1 / May 22, 2012 11:51am

vincentstephens
13 posts

Hi, I have built a grid slider:

http://www.theworldatyourfeet.co.uk/templates/default_site/snippets/gridslider.html

This is a snippet and works fine. (some of the image are not there yet) When you click n an image you get another panel showing information about the person.

However, when I include this in my main template (with the {gridslider} embed snippet command) the panels do not work. At least mostly they do not work.. Mark Laville and Benjamine Dunks seem to be fine.

You can see the embedded snippet on a duplicated template (the template includes another embedded template called about) here:

http://www.theworldatyourfeet.co.uk/index.php/twayf/index-copy#top

This is a copy so I can test it working before including on the main page.

Can you tell me what is going on?
#2 / May 23, 2012 12:50pm

Dan Decker
7338 posts

Hi vincentstephens,

Thanks for posting your question!

The example links are fantastic! However, with things like this, it often more helpful to see the actual code from the snippet and template.

Can you share that with us?

Cheers,

#3 / May 23, 2012 3:11pm

vincentstephens

13 posts

Grid Slider (the snippet)

<link rel="stylesheet" type="text/css" href="../../../grid-slider/example.css"/>
<link rel="stylesheet" type="text/css" href="../../../grid-slider/grid-slider.css"/>
[removed][removed]
[removed][removed]
[removed][removed]
[removed]
$(document).ready( 
 function() {
  //initialize slider
  $(".container1").gridSlider({
   num_cols:3,
   num_rows:2,
   tile_width:210,
   tile_height:150,
   tile_margin:5,
   tile_border:1,   
   margin:10,   
   auto_scale:true,
   auto_center:true,
   auto_rotate:false,
   delay:6000,
   mouseover_pause:false,
   effect:"h_slide", 
   duration:500,
   easing:"",
   display_panel:true,
   panel_direction:"bottom",
   display_timer:false,
   display_dbuttons:true,
   mouseover_dbuttons:true,   
   display_numinfo:false,
   display_index:true,
   display_number:true,
   display_play:false,
   display_caption:true,
   mouseover_caption:true,
   caption_effect:"fade",   
   caption_position:"inside",
   caption_align:"bottom",     
   caption_width:0,
   caption_height:0,
   cont_nav:true,
   shuffle:true,
   category_index:0,
   mousewheel_scroll:true
  });
 }
);
[removed]

<div class="container1">
 <div class="g-slider">       
     <div class="tiles">
         <ul title="The Team">
             
             <!-- 1 -->
             <li>
                    <a href="#mark" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/mark_laville.jpg</a>
                    <div>Mark Laville</div>
                </li>
                
                <!-- 2 -->
                  <li>
                    <a href="#ben" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/benjamin_dunks.jpg</a>
                    <div>Benjamin Dunks</div>
                </li>
                
                <!-- 3 -->
                 <li>
                    <a href="#victoria" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/victoria_allen.jpg</a>
                 <div>Victoria Allen</div>
                </li>
                
                <!-- 4 -->
                <li>
                    <a href="#matt" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/matt_griffiths.jpg</a>
                    <div>Matt Griffiths</div>
                </li>
                
                 <!-- 5 -->
                 <li>
                    <a href="#sheila" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/-.jpg</a>
                    <div>Sheila Snellgrove</div>
                </li>
             
              <!-- 6 -->
                <li>
                    <a href="#emma" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/emma_hoare.jpg</a>
                    <div>Emma Hoare</div> 
                </li>
              
               <!-- 7 -->
                 <li>
                    <a href="#andi" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/andi_higginson.jpg</a>
                    <div>Andi Higginson</div>
                </li>
                
                 <!-- 8 -->
                <li>
                    <a href="#kevin" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/kevin_johnson.jpg</a>
                    <div>Kevin Johnson</div>
                </li>
                
                 <!-- 9 -->
                <li>
                    <a href="#chloe" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/chloe_hughes.jpg</a>
                    <div>Chloe Hughes</div>
                </li>
                
                 <!-- 10 -->
                <li>
                    <a href="#robbie" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/robbie_kings.jpg</a>
                    <div>Robbie Kings</div>
                </li>
                
                 <!-- 11 -->
                <li>
                    <a href="#catharine" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/catharine_chapman.jpg</a>
                    <div>Catharine Chapman</div>
                </li>
              
               <!-- 12 -->
                <li>
                    <a href="#jodie" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/jodie_bishop.jpg</a>
                    <div>Jodie Bishop</div>
                </li>
              
                 <!-- 13 -->
                <li>
                    <a href="#fiona" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/fiona_evans.jpg</a>
                    <div>Fiona Evans</div>
                </li>
                
                 <!-- 14 -->
                <li>
                    <a href="#june" rel="inline">http://www.theworldatyourfeet.co.uk/templates/default_site/images/_resize-600px/june_gamble.jpg</a>
                    <div>June Gamble</div>
                </li>

#4 / May 23, 2012 3:12pm

vincentstephens

13 posts

About-copy (the first embedded template)

<!-- (About ) TOP BOX ********************************** -->
<div id="top" class="box">

   {flickrshow-about} 


<!-- content_bg -->
<div class="content_bg">

<h2 class="heading">About The Project</h2>

 <!-- top container -->
 <div class="content_container">

<!-- top box content -->

<!-- end top content (inside top container) -->
<h2>The World At Your Feet </h2>
<p> <br />
 <br />
 <br />
 {exp:channel:entries channel='about_channel'}<br />
   {image1}<br />
  {/exp:channel:entries}<br />
  <br />
 <br />
  </p>



<p>  </p>

<p><br />
{partners}<br />
  </p>

<p><br />
/images/coloured_people.jpg</p>

<p> </div><br />
 <!-- end top container --></p>

<p></div><br />
<!-- end content_bg --></p>

<p> <br />
</div><br />
<!-- END (About) TOP BOX *************************** -->

#5 / May 23, 2012 3:15pm

vincentstephens

13 posts

index-copy (the index page - a)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 
 
 <title>The World At Your Feet</title>

<link rel="stylesheet" type="text/css" href="/css/twayf.css" />

<!--[if IE 8]>
     <link rel="stylesheet" type="text/css" href="/css/twayf-ie8.css" />
<![endif]-->



<!-- Load jQuery -->
 [removed][removed]
 [removed][removed]
 
<!-- Load ScrollTo -->
 [removed][removed]
 [removed][removed]
  
<!-- Load LocalScroll -->
 [removed][removed]
 [removed][removed]


[removed][removed]


<!--bxslider -->
[removed][removed]
[removed]
 $(function(){
  $('#storyslider').bxSlider({
    auto: true,
  });
}); 
[removed]
<!-- bxslider -->

<!-- Shadowbox -->
<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
[removed][removed]
[removed]
Shadowbox.init(
 
);
[removed]
<!-- shadowbox -->

<!-- mosiac -->
<link rel="stylesheet" href="/css/mosaic.css" type="text/css" media="screen" />
[removed][removed]

[removed]  
   jQuery(function($){
    $('.fade').mosaic();      
      });
  [removed]
<!-- end mosiac -->

<!-- go to Anchor -->
 [removed]

 function goToAnchor() {
    var urllocation = location.href;
    var hashMatch = urllocation.match(/#(.*)/)
    if (hashMatch){
        [removed].hash = hashMatch[1];
    } else {
        [removed].hash = "middle";
    }
}
 [removed]  
  <!-- javascript that will initiate jQuery and the LocalScroll plugin -->
 [removed]
 
 // When the document is loaded…
    $(document).ready(function()
 {
  // Scroll the whole document 
  $('#nav').localScroll({
     target:'body',
     axis:'xy',
     //queue:true
  });
    
 });
    [removed]
    
      <!-- javascript that will initiate jQuery and the LocalScroll plugin -->
 [removed]
 
 // When the document is loaded…
    $(document).ready(function()
 {
  // Scroll the whole document 
  $('#menu').localScroll({
     target:'body',
     axis:'xy',
     //queue:true
  });
    
 });
    [removed]

</head>
  <body>
  
  <!--[if IE 7]> 
  <div>
    <div>a href='#' onclick='[removed]this[removed][removed].style.display="none"; return false;'>http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg</a></div>
    <div>
      <div>img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'></div>
      <div>
        <div>You are using an outdated browser</div>
        <div>For a better experience using this site, please upgrade to a modern web browser.</div>
      </div>
      <div>a href='http://www.firefox.com' target='_blank'>http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg</a></div>
      <div>a href='http://www.browserforthebetter.com/download.html' target='_blank'>http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg</a></div>
      <div>a href='http://www.apple.com/safari/download/' target='_blank'>http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg</a></div>
      <div>a href='http://www.google.com/chrome' target='_blank'>http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg</a></div>
    </div>
  </div>
 <![endif]-->

#6 / May 23, 2012 3:18pm

vincentstephens

13 posts

index-copy (the index page - b)

<!--[if IE 6]> 
  <div>
    <div>a href='#' onclick='[removed]this[removed][removed].style.display="none"; return false;'>http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg</a></div>
    <div>
      <div>img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'></div>
      <div>
        <div>You are using an outdated browser</div>
        <div>For a better experience using this site, please upgrade to a modern web browser.</div>
      </div>
      <div>a href='http://www.firefox.com' target='_blank'>http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg</a></div>
      <div>a href='http://www.browserforthebetter.com/download.html' target='_blank'>http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg</a></div>
      <div>a href='http://www.apple.com/safari/download/' target='_blank'>http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg</a></div>
      <div>a href='http://www.google.com/chrome' target='_blank'>http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg</a></div>
    </div>
  </div>
 <![endif]-->
  
  /images/main-bg-blue.jpg
  
  <!-- main construction -->
  {nav}  
  {header}   
  {preload}
  {inspire}

  <!-- boxes -->
  {embed="twayf/home"}
  {embed="twayf/about-copy"}
  {embed="twayf/get_involved"}
  {embed="twayf/stories"}
  {embed="twayf/whats_on"}
    
 
  
 </body>
</html>

So there you go….that is the full un-truncated code.

I simply cant figure out why it wont display… even stranger that some of the items work (mark laville) and not others!!?

#7 / May 23, 2012 4:40pm

vincentstephens
13 posts

in the snippet I changed line

Victoria has overall responsibility for the Creative Learning department’s direction and work at The Theatre Royal. She is also one of the Senior Managers of the organisation ensuring that Creative Learning, along with
artistic development, is at the core of the theatre’s ambition.

for

Victoria has overall responsability for the creative learning department’s direction and work at The Theatre Royal. She is also one of the senior managers of the organisation ensureing that creative learning. along with artistic development, is at the core of the theatre’s ambition.

and all seem to work now
#8 / May 30, 2012 5:00pm

Dan Decker
7338 posts

Hi Vincent,

Victoria has overall responsability for the creative learning department’s direction and work at The Theatre Royal. She is also one of the senior managers of the organisation ensureing that creative learning. along with artistic development, is at the core of the theatre’s ambition.

Capitalization?

That’s the only thing I see different - that change allowed this to work?

Bizarre.

Is there anything else I can assist you with?

Cheers,
#9 / May 31, 2012 7:26am

vincentstephens
13 posts

Hi Dan, Thanks for taking the time to look into it. I have now got it working for the troubled few. I had to type their entries instead of copy and paste from a text doc. I also can only think it was some kind of hidden formatting issue.

Cheers, Vince
#10 / Jun 01, 2012 3:20pm

Shane Eckert
7174 posts

Hey vincentstephens,

That’s really odd. But I am glad it is working!

If you need anything else, please just let me know by opening a new thread.

Cheers,

Thread

vincentstephens

Dan Decker

vincentstephens

vincentstephens

vincentstephens

vincentstephens

vincentstephens

Dan Decker

vincentstephens

Shane Eckert

Username

Password

Thread

grid slider not working as a snipet

ExpressionEngine News!

Username

Password

Email Address

Display Name

Password