Slideshow set-up - images just get plainly displayed below each other with no sign of controls

Hmmm, I checked and it all seems to be there, can you attach the source code of the page the slideshow should be appearing on, I wonder if the JS is not loading or something is wrong with the classes it needs to print etc.

I am having the same issue with photos stacking, below is the source code for my slideshow region.

     </header>
        <div class="contextual-links-wrapper"><ul class="contextual-links"><li class="node-edit first"><a href="/node/12/edit?destination=node">Edit</a></li><li class="node-delete last"><a href="/node/12/delete?destination=node">Delete</a></li></ul></div>
    <div class="article-content clearfix">
    <div class="field field-name-field-slide field-type-image field-label-hidden view-mode-full">
    <div class="field-items">
          <figure class="field-item">
        <img typeof="foaf:Image" src="http://commerce:8082/sites/commerce/files/styles/banner/public/bwsnapshot.jpg" alt="" />                                                                </figure>

          <figure class="field-item">
        <img typeof="foaf:Image" src="http://commerce:8082/sites/commerce/files/styles/banner/public/break.jpg" alt="" />                                                                </figure>
          <figure class="field-item">
        <img typeof="foaf:Image" src="http://commerce:8082/sites/commerce/files/styles/banner/public/shirts.jpg" alt="" />                                                                </figure>
      </div>
</div>
    </div>

    
    
  </div>

</article>
</div>    </div>
  </div>
</div>
  </div>
      </div>
    </div></div>
  
  <div id="content-wrapper" class="with-secondary"><div class="container">

    
    
    
    <div id="columns"><div class="columns-inner clearfix">

      <div id="content-column"><div class="content-inner">

        
        
                <section id="main-content">

                                <header>
              <h1 id="page-title">Welcome to Evolution Billiards</h1>
            </header>

OK, in the theme settings have you turned it on?

In step 8 you have to enable the JavaScript in the theme settings:

8. Finally go to the theme settings page for AT Commerce. Find the vertical tab for "Slideshow".
   Make sure:
    - Enable slideshow javascript setting is checked
    - Enter the width of the image, what you setup in step 2 for the image style, e.g 940
    - Check or uncheck captions and controls as desired

If you have done this already then we have a problem ;)

Remember to save the theme settings once you have checked the box.

It has been done

Can you check in the themes template directory if there is a file called field--slide.tpl.php, if there is, try clearning the theme registry, if that doesnt work try renaming the file to field--field-slide.tpl.php and clear the registry/caches again.

Still getting the same results. I was looking at the source on the demo page, I'm not sure if its supposed to be near the same, but in the div class there is a flexslider div, i dont have it in mine.

Yes, this is why the image field has to be named "slide", so it gets the field--slide.tpl.php template - that is where the necessary markup is, the correct wrappers and classes.

field--slide.tpl.php is a normal Drupal template suggestions and field--field-slide.tpl.php is just another of these template suggestion names you can use.

OK, one more question - where do you have this installed? Can you tell me the exact path to the template file.

And have you by any change moved any of the templates, such as field--image.tpl.php into the theme root?

the path is C:\Users\Lee\Desktop\Sites\commerce\sites\all\themes\at-commerce. And no files have been changed or moved, i havent hacked anything in the main files, only the items that are in the UI

OK one more question - did you by any chance change the name of an existing image field to "slide"?

there was no existing image field, there were two empty fields, i created the "slider" field with image and the presets done in the config>image setting

This has to be a bug in Drupal core, I'm going to IRC and find some people to chat with, its very odd.

OK, I could replicate this strait away, sorry I did not do that earlier because I have been flat out.

What I found is that field--field-slide.tpl.php will work, however I think there are some things that are not clear in the docs.

Go back and check those settings you have in Nodes in Blocks module settings and the settings on the node edit form for the slideshow node - I am attaching some images that show my settings pages.

Maybe this is a two part issue - first my original template suggestion is wrong, and these settings - these are most important because unless they are like this, exactly, espcially on the node form, it won't trigger the classes to be added to the node wrapper and the JS will fail.

I have everything set up that way, I am still getting the same results

Did you actually clear the theme registry when you changed the template name, because I just went from scratch and set it up, all working, no issues. I have rolled a new beta also with the new template suggestion. Sorry I can't help you further right now as i have to catch a flight.

np, thank you for all your help, safe flight. I will keep messing with it to figure it out. I may just do a fresh install since ive been using since dev model.

I fixed my issue by uninstalling AT Commerce and reinstalling it. I have been working with AT Commerce since the first dev release. Hope this helps in the future.

This is working on my live site, this is an excellent theme. I did have troubles with the same issues prior to this post however it seems that it takes a while for the caching to finish and once it is, the slideshow works great.

I am having an issue when logging in as admin, I'm getting the pictures one on top of another. This doesn't happen on my PC server, it only happens on my live site.

Good stuff, setting to fixed, fingers crossed this time ;)

Sorry to be the one... but I'm having the same issue with the slideshow images turning out stacked up on the front page of the site.

Running AT Core 7.x-2.1 and AT Commerce 7.x-2.0-beta2.

I've cleared the cache in the config section of Drupal 7.8 multiple times and scooped /sites/all/themes out with rm -r * and dropped in a new file set with scp. No joy.

Any help you can offer would be appreciated. I have not yet started looking at any source.

Thanks.

I also tried removing the theme and re-installing it via the administration side of Drupal and I still get stacked images and no slideshow. I'm also not seeing any div with any reference to javascript that would be making the slideshow work when I view the generated page source.

edited because this editor hid my div tag.. =)

Make sure its turned on in the theme settings for the slideshow, failing that I will probably need to see your site to diagnose the issue.

The slideshow is turned on in the theme.

Site is under development and behind a firewall. Port 80 is closed to any IP traffic outside of developers. I'm not going to open the site up unless it's for a specific IP address, so I guess I'll play detective and see if I can find anything here on my own. Please be aware that the issue is not fixed.

Thank you

Awesome theme Jeff, thank you. However I also have the same issue of stacking slider images with no sign of functioning js, and the images only appear in the main content area.

I have been over the readme.txt several times, and have gone through the above comments and install instructions etc but cannot see what I've done wrong (if anything!).

I get a drupal system message stating 'visibility field is required' when I attempt to make changes to any slideshow content.

I'm also following this issue. My live site is at www.lots.co.uk/antiques/

Your assistance is greatly appreciated.

OK, please try this:

On line 214 of template.php (in at_commerce theme) change TRUE to a 1,

i.e.:

Change...

if (theme_get_setting('show_slideshow') == TRUE)

to

if (theme_get_setting('show_slideshow') == 1)

This is in preprocess node, the theme is supposed to add two classes to the node template, one to hide the node title and the other is part of the path jQuery needs to target the right elements, I can see these classes are not being added, so this might be the problem.

Thanks Jeff. I've now made that change but can see no effect.

OK, I did some more digging, this must revolve around this logic in how its checking to see if this is a Node in a Block (this appears to be the central problem now, or there is a bug in Node in Block module).

Try replacing that whole block of code with this, what is happening is the classes are not getting added and without running Devel and a kpr on the node object in your site I can't know the nodesinblock variable is TRUE, so lets do this:

  // Theming for node in block
  $vars['node']->nodesinblock = FALSE;
  if (theme_get_setting('show_slideshow') == 1) {
    if ($vars['node']->nodesinblock = TRUE) {
      $vars['classes_array'][] = 'flexible-slideshow';
      $vars['title_attributes_array']['class'][] = 'element-invisible';
    }
  }

EDIT: I just added the missing closing curly brace, sorry guys, and thanks ricardokc!

Sadly for me I get the dreaded WSOD with that change. I've reverted to the original. I suspect it's not the code as that clearly works elsewhere but something I did wrong in the setup/installation. I'm still playing but happy for any other suggestions.

thanks Jeff, had same problem
used your code but added a closing "}" and it worked.

// Theming for node in block
  $vars['node']->nodesinblock = FALSE;
  if (theme_get_setting('show_slideshow') == 1) {
    if ($vars['node']->nodesinblock = TRUE) {
      $vars['classes_array'][] = 'flexible-slideshow';
      $vars['title_attributes_array']['class'][] = 'element-invisible';
    }
}

except this
$vars['title_attributes_array']['class'][] = 'element-invisible';

makes all titles invisible.... :(

Yes that's great. That worked for me too.

Thanks Jeff and ricardo. I made same changes in template.php . Title is invisible which is OK for me. On the other hand I can't see slideshow at frontpage even I made necessary settings in block and slideshow. I can see only body text at frontpage but no slideshow. If I clicked the content I can see that slideshow is running.
Any idea?

P.S. my slideshow is in featured panel and sub theme installed.

Need to see the site, to show the title you only need to remove the element-invisible class from titles, aka remove this line:

$vars['title_attributes_array']['class'][] = 'element-invisible';

How we looking on this issue guys, looks like the fixes in #27/#29 clean this up?

Regarding showing Node titles, I am adding a theme setting so you can hide the node title if you want to, otherwise it will show by default.

Sorry Jeff, I checked in again as I was having trouble with getting the slideshow displaying correctly in the 'feature panel' region, and other regions. It is working fine as a node, but not as a block. This may be what was meant in #31.

I need to go through my installation again as my Nodes in Block doesnt seem to be doing what it should, and I am still getting 'visibilty field' errors whenever I try to edit content, which is a separate matter, but I dont have the NiB vertical tab so I'm unable to select the same settings as your node form image shows in #12. It would be a shame to close this issue too soon if other users were having the same trouble as me, despite the advice above.

I hope to provide a solution soon.

'Hide the node title' for Slideshow -as in #33- hides node titles off all other content types, too. Also; text in all body fields is centered, now. Where to fix this?

I now have the slideshow displaying correctly at www.lots.co.uk/antiques/success (demo page) which is a views slideshow block. I have Views 7.x-3.0-rc1 installed and the UI enabled but not the slideshow or slideshow cycle modules which are disabled. Is there a dependancy on the Views module Jeff?

Memoo I had that issue also and edited the styles.slideshow.css file removing text align center as a temp fix.

Thanks, Drupaldore. #36 Worked for me. I run Views dev; up untill now no issues. Except for the 'hide node titles' thing. Have no clue how to fix that, yet.

@ Drupaldore - can you tell me how you did that with Views, or possibly attach an export of the View (as a text file), I have not tried to use Views for this, mainly I tried to avoid using Views because of the added complexity, but I would be really interested to see how you did that.

Here is the Views export text file. It can be complicated if unfamiliar but this seemed to be relatively easy and was a quicker fix for my site, and I wanted to use views anyway elsewhere on the site. I hope it helps.

@ Memoo have you checked your settings in Admin>Structure>Content Types>(content type that has the title issue)>Manage Fields/Display?

Wondering if we should deprecate the built in slideshow and use this: http://drupal.org/project/flexslider

I was going to work on this with these guys anyway but haven't had time to contribute to it, but afaik its working well. I need to test, it does add a few layers of complexity, but its not exactly an ideally easy setup what we have now either.

From a purely egoistic standpoint: Go with flexslider as it is usable more broadly and seems in its structure and approach more drupally.

Jeff, as much as the slideshow is one of the reasons that drew me to the theme in the first place. The overall reason was the e-commerce integration in a responsive template. AND as much as I liked showing a client to edit their slide show within a node, flexslider is pretty easy to use. Flexslider is just another module you install if you want that feature.

Agree with above. A good responsive e-commerce template is key.

Thanks

If someone of you still has got the same problem I solved it in that way:
I discovered that I mistook to set the name for the multi-images field, I set only the label as "slide" not the name,
in the README of the AT-Commerce theme it's written:
4. Add an image field called "slide" to the new Slideshow content type.
that means when you create the field you have to give it the name "field_slide" (the prefix field is fixed).
In that way the file field--field-slide.tpl.php can act to correct theme the image list as an "ul li" list.
Good work,
Alberto

Is there any way to screen shot the step by step process of making the slideshow in order to simplify things?

Just to chime in about using Flexslider for slideshow. There is an opportunity here to make Flexslider WCAG accessible. Minimum accessible features are:

• A title, caption or text description for each slide.
• The user should be able to navigate the slides by keyboard (next, previous, pause, play, etc...)

There are examples of accessible slideshows here:

http://www.tc.gc.ca/eng/menu.htm
and
http://canada.gc.ca/home.html

Notice that the text caption is on the left side of each slide, and an optional link to further information.

In fact, I had this problem, and when I examined the files sent by Jeff Burnz (post 12) I noticed that he put all the images in one item of type slideshow while I created an item for every image that I wanted to appear in the slide show.

I deleted all items expect one and I put all images there, and the slide show works fine.

I hope this helps

I am having this same problem in Chrome and IE8 - works fine in Firefox. I have not applied the code changes mentioned in #27. I have fixed the issue in Chrome by compressing js files in the Performance section. However, while that fixes it in Chrome and it works fine in Firefox - the images still stack in IE8. I have not tried IE9. The demo site at http://adaptivethemes.com/demos/atcommerce/ also shows stacked images for me in IE8 but works fine in Chrome and Firefox. What does compressing js files do to make it work properly in Chrome and is there just a setting in IE8 to make it work there?

I noticed the same problem so I tested the http://adaptivethemes.com/demos/atcommerce/ i in Adobe browser lab. It turns out that ie7 and ie6 have the same problem. It works fine in ie8 and ie9 though.

I did a little research and this page http://stackoverflow.com/questions/2403011/ie6-ie7-css-problem-with-over... might have a solution to the problem. It basically states that ie7 and ie6 have a problem with relative positioning and suggests a way to fix it.

I put the recommended code into my conditional stylesheets but I have not tested it out yet since my website is not yet live. I hope it helps someone..heck I hope it helps me bc I really love this theme.

Im getting this same problem with rc2 on all browsers (and admin/anonymous), Its just a vanilla install of Drupal 7.10 with no modules except nodes in blocks. Went through the readme lots of times now, looked at all the comments above and the screenshots, reinstalled the theme and nothing is working. What next?

I have just pushed the changes in #27 to the DEV version, they should be available in 12 hours or so (it takes some time for DEV versions to update on Drupal.org).

Going to mark this as fixed for now, feel free to open again - but please only for the DEV version, we know its not working correctly in RC2.

yes that change in #27 worked, thank you

I am having the same behavior described by @Irisibk in #49. Works fine in everything by IE7. The demo site is still the same way. I upgraded to the latest dev version, but sadly the problem persists. I have not been able to get the tweak mentioned in the comment to work either.

Unless someone stumps up with a patch I am calling this fixed, I simply don't have time to look into this, IE7 is very old browser and while I try to support it as much as possible I have limits imposed by available time.

The function of the slideshow was repaired for IE7 by removing a trailing comma at the end of the slideshowSpeed in slider.options.js. IE7 is the only browser that choked in it. It has required some styling changes to make it look acceptable, but I'm just about there. The only issue that remains is the images shake during the transitions due to IE7's handling of position:relative. Not sure how to fix it yet, but I will keep trying. Here is a patch for the comma removal. Still new to patching, so feedback is appreciated.

So with the comma removed IE7 at least works, but needs some additional CSS/style work to make it better, but all other browsers are otherwise unaffected by this change, right? If so we can commit this.

Everywhere I checked works fine(don't have Opera).

I had a problem with similar behavior, too. My slideshow was working fine when I was logged as admin, but when logged as any other user or anonymous user, slideshow images would be displayed below each other. I spent many hours resolving the problem. I tried everything above, thought that javascript & jquery are not loading etc. The problem that I had was caused by module Block Refresh (http://drupal.org/project/block_refresh). On the page of this module says that there are some issues with certain themes, but I overlooked it (http://drupal.org/node/881046 post #2). I didn't yet try to fix it using post #2, but disabled this module, and my slideshow now works for all users. I found out the cause of the problem using firebug plugin for Firefox. It came with error:

Drupal.settings.block_refresh is undefined
"my site"/sites/all/modules/block_refresh/js/block_refresh.js?m80tjl
Line 5

I know this isn't related to any bug in at commerce slideshow, but I put it here just in case someone else gets misguided.

I really like this theme, btw (:

Considering my post #59. I rushed.. The only thing I should have done is to go to read this:

Be sure to set appropriate permissions at admin/user/permissions (admin/people/permissions in Drupal 7)

Block Refresh
Access block refresh content
Selected roles will see content refreshed in enabled blocks.

I set up a slideshow using the README file in AT Commerce several times and kept having the same problem as above - images stacking on top of each other instead of displaying as a slideshow. I was finally successful only when I named the image field "slide." I suggest the README and other documentation be changed to say you must name the image field "slide" just as it says you must name the content type machine name "slideshow."

I apologize if this is the incorrect issue to post under but have been looking for a resolution.
My product images look absolutely fine when the site is running in Safari, however when run in IE, or Firefox - they view completely wrong (blown up and cut in half)

Does anyone have any input on this as I would like to get the site running soon but this is an issue when it comes to compromising look and feel of my site.

www.mjmroyalties.com

Any input would be greatly appreciated, thank you all in advance!

I spent hours trying to get the slideshow to work. The images render fine as content node. I follow readme many times and still no slideshow.

I have not made any changes in core adaptive theme, and only made changes in the AT Commerce.

It would be nice if you could go back through your readme and carefully follow your own directions. Be very careful to be precise. I am sure there is something amiss, because I can read and follow instructions well enough.

Then if it works, maybe you could make precise changes in the readme. I just think there is something we are missing, i.e., like clear cache, check JS, etc.

Thanks for your great work I am using many of adaptive themes.

#44 Worked for me! Thank you a lot!!

Symphonia, could you explain how did you implement those changes? I gave it a try but apparently didn't do it right, for I broke the whole thing. I'm not sure what code I have to delete and where I should place the code from #44.

My slideshow is displaying two images out of four, one on top of the other; then it slides them out and displays two more; then it displays nothing. When I reload the browser (I'm using Firefox), it displays correctly, just one image that slides out leaving another one in place. The problem is that most of my visitors are seeing the two images that I described at the beginning. Apparently, the slideshow displays well in Chrome and IE.

Any thoughts?

LOL.

Guys, I have solved my problem. And it was sooo simple, that is why I LOLed.

First, the images have to be in ONE, SINGLE, SAME node/content. If you want to add images for the slideshow, just add images to THE SAME node/content.

I added a few nodes/contents with an image for each node, so that is why each node is displayed above one another.

Cheers.

Very important for those using Commerce Kickstart
If you want to use AT Commerce + Drupal 7 + Commerce Kickstart is very important:
1) When installing Commerce Kickstart not activate the slideshow otherwise you create the type of content slideshow that is incompatible with what it required to AT Commerce
2) Create the slideshow exactly as written in AT-Commerce README.txt file without changing the names, otherwise these feautre does not work...
Silvio

Create ONE node with multiple images (Not multiple nodes) - very important and not intuitive if you are used to Drupal!!

#68 - yeah, I kind of agree - the idea was to allow users to create many slideshows. I never saw the sense in creating just one slideshow, since most business would want more than one, and use them at specific times, such as seasonal, or for promotion etc.

Thank you so much atrosi , If you dont point so clear that issue I could be wondering around for ages!!!

I also had the images stacked one on top of the other.

#68 fixed it for me! Although I read and understood that I had to make the field_slide accept multiple images and therefore use one Slideshow node with may images, I had my brain in the wrong place and created three Slideshow nodes with single images to test it.

What confused me is that the "Nodes in Block" block that I put on my front page displayed all three images (all three Slideshow nodes!) instead of just one.

So I was incorrectly assuming that I built the thing correctly and just the slide effect didn't work...

I now have this problem in IE10, with compatibility switched off.

1) I have concatenated the js files under performance
2) I don't have any unusual modules (not even Commerce)
3) I removed the comma in the .js file.

Everything works perfectly in Firefox, Chrome and the versions of IE that I have. Unfortunately the client has IE10, and the thought of having redo the entire layout with a different theme base is too daunting to contemplate!

Please can anyone assist?

comment follows

I also had the same images stacked one on top of the other.
I carefully read README.txt and check all instructions.
I use AT Commerce 7.x-3.0-rc1 or 7.x-3.0-rc1+0-dev with drupal 7.24, jQuery 1.5.2 or jQuery 1.8.7
but nothing happens :(