Portal Block--Gallery Slideshow

[Kylin]

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.

[anori]

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

[Kylin]

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>

[anori]

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.

[Kylin]

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).

[anori]

I am starting to really hate cross browser compatibility

Try the following:

http://jsfiddle.net/KqeDm/29/

Also try this one afterwards if above does not work:

http://jsfiddle.net/KqeDm/30/

[Kylin]

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.

[anori]

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 :/

[Kylin]

Unfortunately, the opacity trick only seems to cause the slideshow images to vanish entirely even after the initial page load

[anori]

Unfortunately, the opacity trick only seems to cause the slideshow images to vanish entirely even after the initial page load

Mhmm not sure if it has to do with the jquery site acting up:

http://malsup.github.com/jquery.cycle.all.js (is not loading at all currently :/ )

Try the microsoft CDN which should be far more stable:

http://ajax.aspnetcdn.com/ajax/jquery.cy...all.min.js