Hurray for success!!
IE and Chrome seem to still have a tiny issue though. The image is centered length-wise, but not height-wise. It stays floating at the very top of the block.
Other than that, thanks so much for your endurance and patience in all of this. Hopefully this is something enough people will be interested in.
(2012-12-20, 12:47 AM)Kylin Wrote: [ -> ]Hurray for success!!
IE and Chrome seem to still have a tiny issue though. The image is centered length-wise, but not height-wise. It stays floating at the very top of the block.
Other than that, thanks so much for your endurance and patience in all of this. Hopefully this is something enough people will be interested in.
Tried it while i am not able to reproduce it (using the below thing in ie/chrome latest versions) even when loading in all the CSS elements from mybb.
http://jsfiddle.net/KqeDm/14/
I did change a few things (small things see the css for the changes. Everything is now 220 width and the line height got increased to 220 while max height did not get increased. ) But maybe try and increase the left sidebar's width to 220px
Bleh, I'm not sure why I can't seem to fix it the rest of the way. All the style elements are in place. I must be missing something small. Here are my html files:
portalezgallery_template_index:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($)
{
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 1800
});
});
});
</script>
<style type="text/css">
#myslides {
margin: 0px auto;
width: 220px;
height: 220px;
text-align: center;
line-height: 220px;
}
#insidediv {
width: 220px !important;
height: 220px !important;
}
#insidediv img {
vertical-align: middle;
max-width: 200px;
max-height: 200px;
}
</style>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<br />
<tr>
<td class="thead"><strong>Gallery Slideshow</strong></td>
</tr>
<tr>
<td class="trow1">
<div id="myslides" style="position:relative;">
{$ezgallery_img}
</div>
</td>
</tr>
</table>
<br />
portalezgallery_template_portal:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($)
{
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 1800
});
});
});
</script>
<style type="text/css">
#myslides {
margin: 0px auto;
width: 220px;
height: 220px;
text-align: center;
line-height: 220px;
}
#insidediv {
width: 220px; !important;
height: 220px; !important;
}
#insidediv img {
vertical-align: middle;
max-width: 200px;
max-height: 200px;
}
</style>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead"><strong>Gallery Slideshow</strong></td>
</tr>
<tr>
<td class="trow1">
<div id="myslides" style="position:relative;">
{$ezgallery_img}
</div>
</td>
</tr>
</table>
<br />
portalezgallery_image:
<div id="insidediv">
<a href="{$iPath}">
<img id="myslideimg" src="{$iPath}">
</a>
</div>
Trying to figure the problem out, i have tried code that would change the margin.. with .each() jquery code.. but it only does it for 1 all those things.. asked the question at stackoverflow maybe somebody there is able to figure out the problem. /hope&pray
So i would say try the following code:
http://jsfiddle.net/KqeDm/27/
It changes quite a few things and all the spacing there is done by jquery it self. Hopefully it works.
That fixed the issue in Internet Explorer. Google Chrome is now displaying the picture in the right bottom portion of the box though
on my site (though strangely, not with your link when loaded into Chrome).
Yes, cross-site compatibility sucks. I especially despise Chrome myself
But that seemed to fix it! The only minor gripe I have is that when the screen first loads, all the recent images load stacked on top of each other. It only happens for a brief moment so I suppose it's not a huge deal.
(2012-12-21, 07:56 PM)Kylin Wrote: [ -> ]Yes, cross-site compatibility sucks. I especially despise Chrome myself
But that seemed to fix it! The only minor gripe I have is that when the screen first loads, all the recent images load stacked on top of each other. It only happens for a brief moment so I suppose it's not a huge deal.
Happens on both the versions i showed you?
Then it probably has to do with the behavior of window.load(function()
And then it would not be something i can easily fix. Well you could try adding opacity: 0; to the image style which is changed by the plugin. So it would when loaded all by opacity:0;
Example:
http://jsfiddle.net/KqeDm/31/
For the rest chrome with html/css accepts any bad code so .. it generally works but apparently for javascript its a pain :/
Unfortunately, the opacity trick only seems to cause the slideshow images to vanish entirely even after the initial page load
