?
Solved

CSS for images to resize with page

Posted on 2013-06-01
4
Medium Priority
?
707 Views
Last Modified: 2013-06-04
I'm having trouble getting pics in a Joomla slideshow to resize correctly. The slideshow is part of a Yootheme Joomla template, one called Infinity. But it's not a default part of the template; rather, it's an add-on that Yootheme doesn't fully support -- they should, but they don't.

The pictures are in a WidgetKit slideshow.

The pics display correctly, but when the browser page is made wider, the pic resizing lags behind that of the rest of the page by a half second or more. When the page is made narrower, there are often display problems as well.

Here's a test version of my site. The slideshow is right on the home page.

This is the html and css that cause the pics to display:

<div class="frontpage-teaser1"><img src="images/widgetkit/slideshow/blank-459x1200.png" alt="blank" width="1200" height="459" border="0" />
</div>
<div class="frontpage-teaser2"><img src="images/widgetkit/slideshow/blank-459x1200.png" alt="blank" width="1200" height="459" border="0" />
</div>

.frontpage-teaser1 {
	background-image: url(../../../images/widgetkit/slideshow/map5.jpg);
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
.frontpage-teaser2 {
	background-image: url(../../../images/widgetkit/slideshow/students-on-grass.jpg);
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

Open in new window

I know it can be done, because other sites that use the same template have gotten it to work. Here are three of them:

I'd be grateful if someone could compare my site to the ones that are resizing the images correctly and tell me what css I need to add or change to fix the problem.

Thank you!

Regards,
Jon
0
Comment
Question by:Jonathan Greenberg
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39213354
I'm guessing some kind of conflict - two functions trying to do the resize maybe. As the only difference I can see between the sites is your use of multiple js plugins.
Can you try disabling some of them?
0
 

Author Comment

by:Jonathan Greenberg
ID: 39213482
Thanks, Gary.  But I'm not sure what you mean, which is maybe to say that I'm not sure what a javascript plugin is.  Is jQuery a javascript plugin?  If so, are you referring to multiple versions of jQuery?  Or are there other "js plugins" that your seeing that I should try disabling?
0
 

Author Comment

by:Jonathan Greenberg
ID: 39213850
I need to correct something in my question.  Of the three sites I listed that use the same template as mine, only one is useful for comparison because the other two are WordPress, not Joomla.

The Joomla site that gets the images to display correctly is:
Sorry about the mistake!
0
 

Author Comment

by:Jonathan Greenberg
ID: 39220984
Thank you, Gary, you were correct.  I found and eliminated a couple of JavaScript plugin conflicts, and the display of the slides is now much improved.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question