Solved

CSS for images to resize with page

Posted on 2013-06-01
4
699 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 500 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
What does GoogleTagMgr javascripts below do 5 58
Show MP4 file and close (HTA) 3 22
JS to redirect to prev page 8 23
CSS (jquiry mobile) question 3 4
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

733 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