October 26, 2012 at 11:14 pm #17367
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?October 27, 2012 at 1:11 am #95256
Try this on your custom.css
IsmaelNovember 7, 2012 at 12:24 am #95257
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 youNovember 7, 2012 at 3:51 pm #95258
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?
NickNovember 8, 2012 at 12:14 am #95259
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.November 8, 2012 at 7:34 am #95260
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; ">
<div class=" slideshow_caption caption_link">
<h1 style="color:#ffffff">Torch Controls</h1>
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; ">
<div class=" slideshow_caption caption_link">
<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.
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.
NickNovember 11, 2012 at 8:33 am #95261
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.November 11, 2012 at 8:54 am #95262
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?November 11, 2012 at 4:01 pm #95263
Solved the mystery. You are using 600×360 images for the slides that drop down ( http://www.retechsystemsllc.com/webdev/wp-content/uploads/2012/10/Plasma-Ingot-600×360.jpg ) and 990×360 for the slides that don’t drop down ( http://www.retechsystemsllc.com/webdev/wp-content/uploads/2012/10/Plasma-Molten-Pool-3-990×360.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 990×360 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.
The topic ‘Slideshow Image Height’ is closed to new replies.