Slideshow Image Height « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Coherence

Slideshow Image Height

9 posts from 3 voices

Started 6 months ago by Retech
Latest reply from Nick
This topic is closed
This topic is resolved

Tags:

Retech
Member

I am trying to figure out how to prevent the slideshow on my pages from resizing, specifically changing the height, for some images. Here is one of the pages: http://www.retechsystemsllc.com/webdev/?page_id=364

I don't want it to resize at all when the page is open, but only when it opens in the lightbox. This resize also moves the text and that has proven to be unpopular as we work on this site. I have been trying to add the 'crop'=>false); function to functions.php and then resizing the thumbnails, but regardless of whether I use 'false' or 'true', the longer images resize.

Any thoughts?

Posted 6 months ago #

Ismael
Moderator

Hi,

Try this on your custom.css

.slideshow_container.slide_container_small {
max-height: 216px!important;
overflow: hidden;
}

Regards,
Ismael

Posted 6 months ago #

Retech
Member

Ismael,

Thank you, that worked for keeping the container small, however the border disappears at the bottom when a long image is there and the caption also hides down at the bottom. Is there a way to just make the longer images show up the same way as the shorter ones and include the container? http://www.retechsystemsllc.com/webdev/?page_id=364 I moved a long image to the second spot in the slider so you could see what happens.

Thank you

Posted 6 months ago #
Nick
Moderator

Hi,

You have 4 slides different then all the rest, including the 2nd one. Their titles are : Torch Controls; A Four (4) Torch System; Plasma C-Hearth Configuration; C-Hearth & Crucible. Each one of those is missing a div and also missing a description. Would you please add a description to those slides as you have on the rest, or its not showing up?

Thanks,

Nick

Posted 6 months ago #
Retech
Member

The descriptions are already there, but they slide down below the level of the slider window to the lower constraint the image used to go to I believe.

When you get to the second image (for example) you can see the caption disappear down below the level of the window. You can also see the offset image size in the placement of the magnifying glass that opens the lightbox.

Posted 6 months ago #

Nick
Moderator

Hi,

I looked at your code before writing my previous answer, and I stand by what I wrote above. Your descriptions for the above mentioned slides are completely missing in the code. You can look at the code below and see if you can locate the descriptions. Please delete them, and add them again and see if there is a difference. Also please dont use any single quotes in your descriptions, and see if there is a difference.

Code for slide # 2 (missing description)

<li data-caption="<h1 style='color:#ffffff'>Torch Controls</h1>" data-animation="random" class="featured featured_container3 caption_bottom caption_bottom_framed caption_framed withCaption" style="display: none; z-index: 1; position: absolute; left: 0px; top: 0px; ">
<a href="http://www.retechsystemsllc.com/webdev/wp-content/uploads/2012/10/Plasma-Torch.jpg" rel="lightbox[auto_group1]" style="left: auto; "><img src="http://www.retechsystemsllc.com/webdev/wp-content/uploads/2012/10/Plasma-Torch-600x360.jpg" title="Plasma-Torch" alt="" data-imgh="360" data-imgw="990" style="left: 0px; ">
<span class="image_overlay_effect lightbox_image" style="display: block; z-index: 5; opacity: 0; ">
<span class="image_overlay_effect_inside"></span>
</span>
</a>
<div class=" slideshow_caption caption_link">
	<div class="slideshow_inner_caption">
		<div class="slideshow_align_caption">
			<h1 style="color:#ffffff">Torch Controls</h1>
		</div>
	</div>
</div>
</li>

Code for slide # 5 (description available)

<li data-caption="<h1 style='color:#ffffff'>Ready to Go!!</h1><div style='color:#ffffff' class="featured_caption">A loaded cold-hearth and a torch positioned over top, ready to strike an arc.</div>" data-animation="random" class="featured featured_container9 caption_bottom caption_bottom_framed caption_framed withCaption" style="display: none; z-index: 1; position: absolute; left: 0px; top: 0px; ">
<a href="http://www.retechsystemsllc.com/webdev/wp-content/uploads/2012/10/Plasma-Furnace-Chamber-2.jpg" rel="lightbox[auto_group1]" style="left: auto; ">
<img src="http://www.retechsystemsllc.com/webdev/wp-content/uploads/2012/10/Plasma-Furnace-Chamber-2-990x360.jpg" title="Plasma-Furnace-Chamber-2" alt="" data-imgh="360" data-imgw="990" style="left: 0px; ">
<span class="image_overlay_effect" style="display: block; z-index: 5; opacity: 0; ">
<span class="image_overlay_effect_inside"></span>
</span></a>
<div class=" slideshow_caption caption_link">
	<div class="slideshow_inner_caption">
		<div class="slideshow_align_caption">
			<h1 style="color:#ffffff">Ready to Go!!</h1>
			<div style="color:#ffffff" class="featured_caption">
				A loaded cold-hearth and a torch positioned over top, ready to strike an arc.
			</div>
		</div>
	</div>
</div>
</li>

To understand what is happening its good to test a few things. First thing is to compare the 4 missing descriptions and see if they have something in common (a non standard character, a single quote, etc.); Then to start looking for a different theory as to why the descriptions are removed from the code. Could you paste here the descriptions for the 4 slides i mentioned please.

Thanks,

Nick

Posted 6 months ago #

Retech
Member

Took the descriptions out that were there, saved the page, put them back in, saved the page, same problem unfortunately. I can see the descriptions moving down below the bottom border of the image when the longer images come up. It looks like they are sliding down and out of sight. The bottom border also disappears and the image edge moves right up against the light border line.

Posted 6 months ago #
Retech
Member

I figured out that I could get the overflow to not be hidden by changing: overflow: hidden; to overflow: visible;

Now it is possible to see that the caption and description are there, they are just moving down below the edge of the image window. I tried using overflow: auto; and that created a scroll bar. So I tried overflow: inherit; and that went back to showing the longer image over top of things.I am guessing it has to do with something that tells the image to become longer and the caption to go to the bottom of the image, is that possible?

Posted 6 months ago #
Nick
Moderator

Hi,

Solved the mystery. You are using 600x360 images for the slides that drop down ( http://www.retechsystemsllc.com/webdev/wp-content/uploads/2012/10/Plasma-Ingot-600x360.jpg ) and 990x360 for the slides that don't drop down ( http://www.retechsystemsllc.com/webdev/wp-content/uploads/2012/10/Plasma-Molten-Pool-3-990x360.jpg ). If all the original images you upload are at least 990 wide, then during the upload there are radio buttons that ask you which size you want ( http://i.imgur.com/jWoDk.png ), and before you were selecting one size and now are selecting a different size.

If you try to upload an image and no longer see the 990x360 option then please check Settings > Media for any changes to maximum width. This is a good plugin to handle image sizes http://wordpress.org/extend/plugins/simple-image-sizes/ and comes along with a regenerate option as well.

The aspect ratio of the slideshow is 594 x 216

Let us know if this took care of the issue.

Thanks,

Nick

Posted 6 months ago #