MyBB Community Forums

MyBB Community Forums > Extensions > Plugins > Plugin Requests > Portal Block--Gallery Slideshow
Full Version: Portal Block--Gallery Slideshow
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4

RocketFoot

2012-12-17, 07:16 PM
This is a nice plugin! Is there anyway to make the slideshow more random? It plays the same sequence with every page load...would be great to be random with every page load??

anori

2012-12-17, 08:00 PM
(2012-12-17, 07:16 PM)RocketFoot Wrote: [ -> ]This is a nice plugin! Is there anyway to make the slideshow more random? It plays the same sequence with every page load...would be great to be random with every page load??

Thats incredibly easy to achieve, its based on:

http://jquery.malsup.com/cycle/

It has a lot of different effects / options the only thing you have to do to achieve a random effect is:

Change these lines in the template(s):

 $('#myslides').cycle({
            fx:    'fade',  
            speed:    2500
        });

To include:
random: 1

So this would make them random:
 $('#myslides').cycle({
            fx:    'fade',  
            speed:    2500,
            random:  1
        });

Example:

http://jsfiddle.net/KqeDm/2/
Quick additional edit the cycle plugin for for example the index page also makes things like this possible:

http://www.malsup.com/jquery/cycle/div.html

Having multiple images on the top in a row Smile

Kylin

2012-12-18, 02:49 PM
Ok, one last thing (or two I guess) and I'll be set.

1. The image won't seem to center itself in the portal block for me. I removed the "float:left" but that did nothing. Any ideas? Would I need to use margins/padding instead?

[Image: gallerycenter_zpsaa51460a.png]


2. I can't seem to get the index block to the sidebar no matter what I do. This is the big one getting to me right now. Spent most of the day yesterday working on it to no avail. I'm using Nayar's sidebox plugin, but putting in the code an additional box just creates a blank box. I've also been trying to move the {$indexezgallery} code elsewhere on the index template, but it only seems possible to move it up and down, not to the side.

[Image: sidebargallery_zps0aeaa3ad.png]

anori

2012-12-18, 04:16 PM
(2012-12-18, 02:49 PM)Kylin Wrote: [ -> ]Ok, one last thing (or two I guess) and I'll be set.

1. The image won't seem to center itself in the portal block for me. I removed the "float:left" but that did nothing. Any ideas? Would I need to use margins/padding instead?

This one is purely because of the fact that there are position absolute tags next to the image.. you would have to change the <a href src="..." style=" "> in the template to remove those lines. Then it should center itself again.


Quote:2. I can't seem to get the index block to the sidebar no matter what I do. This is the big one getting to me right now. Spent most of the day yesterday working on it to no avail. I'm using Nayar's sidebox plugin, but putting in the code an additional box just creates a blank box. I've also been trying to move the {$indexezgallery} code elsewhere on the index template, but it only seems possible to move it up and down, not to the side.

For this i would need a full copy of your index template so i can see how it looks now. And tell you where to put it.

Kylin

2012-12-18, 04:48 PM
Ah, that makes sense. Now I just gotta find which template file the issue is in. As for the second issue, the current index template looks like this at the moment:

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript" src="jscripts/shoutbox.js"></script>
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
{$indexezgallery}
{$forums}
<sf_shoutbox>
{$boardstats}
<br style="clear: both" />
{$footer}
</div>

</body>
</html>

anori

2012-12-18, 06:44 PM
(2012-12-18, 04:48 PM)Kylin Wrote: [ -> ]Ah, that makes sense. Now I just gotta find which template file the issue is in.

templates > global templates > portalezgallery_image


Quote:As for the second issue, the current index template looks like this at the moment:

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript" src="jscripts/shoutbox.js"></script>
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
{$indexezgallery}
{$forums}
<sf_shoutbox>
{$boardstats}
<br style="clear: both" />
{$footer}
</div>

</body>
</html>

Always nice to see a plugin not using the template system.. :/ makes peoples lives so much easier.
I have looked at the plugins code but i see no easy way to actually make that work.. in any way the variables from that plugin are echo'ed out directly and completely avoid the whole templates.

Maybe.. maybe this works:

$sbwelcome,$sbpms,$sbsearch,$sbstats,$sbwhosonline,$sblatestthreads,$gobutton,$lastvisit,$sbaddbox1,$sbaddbox2;

Those are the variables for the boxes you could try to grab the ones you wish from those like currently it is:

Quote:$sblatestthreads , $sbaddbox1, $sbsearch those three boxes (i think you use).

Maybe this would work no promises though replace index with:

<html>
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript" src="jscripts/shoutbox.js"></script>
<script type="text/javascript">
<!--
    lang.no_new_posts = "{$lang->no_new_posts}";
    lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
<body>
{$header}
<table width="100%"  border="0">
<tr>
<td width="180px" valign="top">
{$indexezgallery}
{$sblatestthreads}
{$sbaddbox1} 
{$sbsearch}
</td>
<td width="auto" valign="top">
{$forums}
<sf_shoutbox>
{$boardstats}
</td>
</tr>
</table>
<br style="clear: both" />
{$footer}
</div>

</body>
</html>

If the above does not work (which i have a feeling it wont).
Then i think to do this.. you are almost forced to use a different sidebox plugin. Since the current one is not compatible in anyway and there is not very much that can be done to actually make it compatible.

The sidebox plugin should have been written more or less as a copy from the portal page. With variables etc in the templates instead of going all around the whole template system making any customization impossible.

Kylin

2012-12-19, 02:47 PM
I decided to just ditch the sidebox plugin. Was causing more issues than it was worth. I instead opted for pure template edits via the jQuery collapsible sidebar. I now have the box positioned where I want it. Ditching the plugin even drastically reduced the number of queries so even better Smile

I'm still unable to solve the center issue though. If I go into the portalezgallery_image template and remove the max-height and max-width dimensions, the image reverts to its large original size and takes up way too much of the page. Is there another workaround for this (or do I need to do more than just remove the max-height/width coding)? Edit: Kinda fixed it. Removed max-height and max-width and just replaced with height and width. But the images look pretty bad now that they get squeezed. I'll have to keep working on the dimensions I guess. Is there a way to simply use the thumbnail version of the ezGallery images instead by chance?

anori

2012-12-19, 04:49 PM
(2012-12-19, 02:47 PM)Kylin Wrote: [ -> ]I decided to just ditch the sidebox plugin. Was causing more issues than it was worth. I instead opted for pure template edits via the jQuery collapsible sidebar. I now have the box positioned where I want it. Ditching the plugin even drastically reduced the number of queries so even better Smile

I'm still unable to solve the center issue though. If I go into the portalezgallery_image template and remove the max-height and max-width dimensions, the image reverts to its large original size and takes up way too much of the page. Is there another workaround for this (or do I need to do more than just remove the max-height/width coding)? Edit: Kinda fixed it. Removed max-height and max-width and just replaced with height and width. But the images look pretty bad now that they get squeezed. I'll have to keep working on the dimensions I guess. Is there a way to simply use the thumbnail version of the ezGallery images instead by chance?

use max width / height Smile they work far better since that auto-scales the other variable which always gives a nicer looking image.

Anyways this is what i have gotten:

http://jsfiddle.net/KqeDm/5/

Simply replace the current css code for those things with the specified there:

#myslides {
    width: 340px !important;
    position: relative;
    margin: 0px auto;
}

Leave the max height/width and i think that should work.

Kylin

2012-12-19, 05:40 PM
Nope, didn't fix it Sad

I decided to test it further by installing a completely new forum on another section of my site. Everything worked fine until I uploaded two different sized images. Once the images are somewhat vastly different in size (width), the centering stops.

Also, the issue in Chrome is still there. The panel the picture is in does not extend the full size of the image. I don't have this problem in firefox or IE (maybe due to my Firefox version, I'm not sure).

anori

2012-12-19, 08:03 PM
(2012-12-19, 05:40 PM)Kylin Wrote: [ -> ]Nope, didn't fix it Sad

I decided to test it further by installing a completely new forum on another section of my site. Everything worked fine until I uploaded two different sized images. Once the images are somewhat vastly different in size (width), the centering stops.

Also, the issue in Chrome is still there. The panel the picture is in does not extend the full size of the image. I don't have this problem in firefox or IE (maybe due to my Firefox version, I'm not sure).


Will try to find if the above can be fixed by letting jquery set the margins (might do the trick).
For the second issue you can simply add to the css a height Smile

PS: will have to look around to figure out the solution will try and update this post as soon as i find it. Since the plugin makes the positioning right now which is the cause of the problems.


After about 4 hours.. the thing finally wanted to work with me Smile

http://jsfiddle.net/KqeDm/13/

Only took 13 versions Toungue

You have to modify the style tag.
This:
<style type="text/css">
    #myslides {
        width: 340px;
        float: left;
        padding: 0;
        margin:  0 auto;
        margin-top: 20px;
        text-align: center;
    } 
</style>

Has to become:

<style type="text/css">
#myslides {
    margin: 0px auto;
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;    
}
#insidediv {
    width: 300px;
    height: 300px;   
}
#insidediv img {
    vertical-align : middle;
    max-width:300px;
    max-height:300px;
}
</style>

And this template (portalezgallery_image) has to be changed to:

<div id="insidediv">
<a href="{$iPath}">
<img id="myslideimg" src="{$iPath}">
</a>
</div>
Pages: 1 2 3 4
MyBB Community Forums > Extensions > Plugins > Plugin Requests > Portal Block--Gallery Slideshow