Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a pair of Portfolio Slideshows inside of jQuery UI Tabs. One per tab with each pulling in a different page's gallery. When I switch between tabs the slideshows behave oddly. The main image is shrinking down to about 10% of its width, but keeping its height. When the page first loads, it seems to be working correctly, and this only happens when the second tab is selected. Once the second tab is selected it will then affect the first tab as well. This can be seen here: wwnumc.org/2012-nehawka-christmas-program/.

I've tried several different approaches to try and rule things out. First being placing the Portfolio Slideshows on the page outside of the jQuery UI Tabs. Both work correctly when not in Tabs. I see no errors on the page using the console. I've also checked Chrome, Firefox, and Safari. All three show the same problem.

  • WordPress Version: 3.5
  • Portfolio Slideshow Version: 1.5.0
  • jQuery Version: 1.7.1
  • jQuery UI Version: 1.9.2

Any ideas would be greatly appreciated.

share|improve this question
1  
The width of the main image div is being reset to 100px. I don't know why. Look for portfolio-slideshow in the Javascript source. Right now, this strikes me as a pure Javascript question, which is off topic here-- faq. You may want to post at Stack Overflow. I have an account there too. – s_ha_dum Jan 14 at 15:20
I realize the main image div is being reset/resized. I selected this site rather StackOverflow as I think its more of a WordPress plugin issue that strictly JS. I could be wrong. I also have an account there, however that is somewhat irrelevant. If the answers here don't produce a resolution I'll consider StackOverflow. – AndyWarren Jan 14 at 15:36
1  
I told you which div is being resized, not just that a div was being resized, and what to look for in the source. If you can find the portfolio-slideshow in the Javascript source you can make progress. The Javascript might be in a plugin but it is still most like a pure Javascript problem, but maybe not. Again, find the bit of code I asked for and we'll see. I was offering to look at your Stack Overflow post if you moved the question there. Isn't that obvious? – s_ha_dum Jan 14 at 15:55

1 Answer

up vote 1 down vote accepted

Not sure what is causing the problem, you could try adding this to init.js (inside the click function, before fade in):

$("#portfolio-slideshow0").css("width","882px");
share|improve this answer
Thanks for the answer, this is bizarre for sure. Where exactly is the init.js file located? I don't see it inside the Portfolio Slideshow plugin directory. I'm certainly willing to try your answer though. I think I'd need to narrow down the selector a bit more though as there are several #portfolio-slideshow0 selectors throughout the site. – AndyWarren Jan 14 at 15:12
1  
it's located at wp-content/themes/LOP/library/js/init.js – diggy Jan 14 at 15:15
Adding it into the click function did not work; however adding .page-id-356 #portfolio-slideshow0, .page-id-356 #portfolio-slideshow1 {width: 880px!important;} to the theme stylesheet worked just fine. Thanks. I'm accepting your answer. – AndyWarren Jan 14 at 15:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.