Minislideshow instead of static image

pavel.pola

Joined: 2007-05-19
Posts: 30
Posted: Mon, 2009-12-28 23:52

Hi all, first of all thank you very much for your effort!!! Your Gallery is my favorite!

I'd like to make a "portfolio" album of my best work or exhibits. I'd like to make it using Gallery2 and MinislideShow from http://www.flashyourweb.com/. My idea is:

1. I have hidden portfolio album with all my best photos from one exhibition
2. I will create new album called "My Portfolio"
3. I will add new item called "Minislideshow Item" with an option to select one thumbnail image and give an ItemId for hidden album with all portofolio photos
4. I will add one item for one exhibition so My Portfolio will grow in time

When users on my site enter My Portfolio they will choose which exhibition they like and instead of showing single image, minislideshow will start (inside a photo container, so every other functions like navigation, comments, ratings etc. are on the page).

Is there some simple way how to do it? I was thinking about "hardcoded hack" into photo.tpl but maybe there is some more clever solution.

Thanks in advance!

Pavel
_________________________________
Please visit my personal gallery: http://www.pavelpola.cz (mostly B&W pictures, Prague, nature, people)
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Tue, 2009-12-29 01:13

Two ideas:

  • A separate theme for these portfolio albums with a custom album.tpl containing just the mini (did something similar for J.P.Morgan)
  • Use swfObject to replace the content gallery generates for these certain albums:
    {if $theme.item.id == 418 || $theme.item.id == 620 || $theme.item.id == 990} {* these would be your albumIds *}
{literal}
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/gallery2/minislideshow.swf", "minislideshow", "800", "800", "9.0.115.0", "ffffff");
so.addParam("flashVars", "xmlUrl=/gallery2/mediaRss.php?mode=dynamic%26g2_view=dynamicalbum.RandomAlbum%26g2_albumId={/literal}{$theme.item.id}{literal}&showDropShadow=true");
so.addParam("wmode", "transparent");
so.addParam("allowFullscreen", "true");
so.addParam("allowScriptAccess", "always");
so.write("gsContent");
// ]]>
</script>
{/literal}
{/if}

    gsContent would be gallery's containing div we want to replace - carbon uses it.

untested

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
 
pavel.pola

Joined: 2007-05-19
Posts: 30
Posted: Tue, 2009-12-29 01:02

Thanks for help but where to place the above code? Album.tpl is not the best place because I'd like to have a "album" with all my exhibitions and when somebody click one exhibition, the slideshow will start instead of single photo.

Pavel
_________________________________
Please visit my personal gallery: http://www.pavelpola.cz (mostly B&W pictures, Prague, nature, people)
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Tue, 2009-12-29 01:20
Quote:
Album.tpl is not the best place because I'd like to have a "album" with all my exhibitions

album.tpl is fine, notice the code is wrapped in an "if" statement and $theme.item.id == 418 || $theme.item.id == 620 || $theme.item.id == 990 would be the list of only the albums you want to show as a slideshow.

but it would be best to place this near the end of your page, so near the bottom of theme.tpl would be better before the end of the body.

if you are going to have just albums that share one common parent you could just use the parentId instead:
{if $theme.parent.id == 990}

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
 
pavel.pola

Joined: 2007-05-19
Posts: 30
Posted: Wed, 2009-12-30 12:20

Thank you very much for your help! My work is finished and I'm very happy with it: http://www.pavelpola.cz/foto/portfolio/

I've used these Gallery features:

- replica plugin for creating copies of portfolio photos into portfolio albums (portfolio albums are standard gallery albums - just click on any photo in flash presentation and you will get standard photo browser)
- template modification: theme.tpl - I've placed this portion of code into <head> section (recommended for SWFObject 2.2)

    {if $theme.item.id == 19724 || $theme.item.id == 19785 || $theme.item.id == 20030 || $theme.item.id == 20113 } {* My Portfolio special handling *}
    {literal}
        <script type="text/javascript" src="/themes/carbon/swfobject.js"></script>
        <script type="text/javascript">
        // <![CDATA[
            var flashvars = {};
            flashvars.xmlUrl = "http://www.pavelpola.cz/mediaRss.php?g2_itemId={/literal}{$theme.item.id}{literal}&shuffle=false&showDropShadow=true&delay=5&transInType=Fade&transOutType=Fade&showTitle=false&roundedMask=false&useFull=tru
            var params = {};
            params.quality = "high";
            params.wmode = "transparent";
            params.allowfullscreen = "true";
            params.allowscriptaccess = "always";
            var attributes = {};
            attributes.name = "minislideshow";
            attributes.align = "middle";
            swfobject.embedSWF("/minislideshow.swf", "gsContentAlbum", "800", "600", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
        // ]]>
        </script>
    {/literal}
    {/if}

- I had to add id="gsContentAlbum" in album.tpl because I wanted to use that div which had only class name: <div class="gsContentAlbum" id="gsContentAlbum">
- I have also changed album.tpl - I've hidden navigation links when displaying flash presentation

It would be fine if new gallery will support immediate flash presentation of selected albums. It's not so difficult to manage it but it would be fine to have some "switch" in gallery to avoid hardcoded ids exceptions).

Thank you again for your help.

Pavel
_________________________________
Please visit my personal gallery: http://www.pavelpola.cz (mostly B&W pictures, Prague, nature, people)
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Wed, 2009-12-30 14:15

Glad you got it figured out :)
I prefer swfobject 1.5 as its more flexible and we already include it in the flashvideo module /modules/flashvideo/lib/swfobject.js same with the mp3audio module.

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
 
pavel.pola

Joined: 2007-05-19
Posts: 30
Posted: Wed, 2009-12-30 22:53

Please one more help - when browsing with IE 8, no flash is displayed (normal album is shown). Does somebody know where is the problem?

Thanks

Pavel
_________________________________
Please visit my personal gallery: http://www.pavelpola.cz (mostly B&W pictures, Prague, nature, people)
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Wed, 2009-12-30 23:40

Your javascript replacement is happening before the page has loaded - even before the gsContentAlbum div exists.
Part of the reason I prefer swfobject 1.5 as you can place it at the bottom of the page after the target div.

But all you need to do is use a load handler - I'll cover all browsers:

<script type="text/javascript">
// <![CDATA[
    function loadHandler(evt){
        if (evt.persisted) {
            return;
        }
        var flashvars = {};
        flashvars.xmlUrl = "http://www.pavelpola.cz/mediaRss.php?g2_itemId={/literal}{$theme.item.id}{literal}&shuffle=false&showDropShadow=true&delay=5&transInType=Fade&transOutType=Fade&showTitle=false&roundedMask=false&useFull=true";
        var params = {};
        params.quality = "high";
        params.wmode = "transparent";
        params.allowfullscreen = "true";
        params.allowscriptaccess = "always";
        var attributes = {};
        attributes.name = "minislideshow";
        attributes.align = "middle";
        swfobject.embedSWF("/minislideshow.swf", "gsContentAlbum", "800", "600", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
    }
    
    if ("onpagehide" in window) {
        window.addEventListener("pageshow", loadHandler, false);
    } else {
        if (document.addEventListener) {
            window.addEventListener("load", loadHandler, false);
        }
        if (window.attachEvent) {
            window.attachEvent('onload', loadHandler);
        }
    }
// ]]>
</script>

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
 
pavel.pola

Joined: 2007-05-19
Posts: 30
Posted: Thu, 2009-12-31 15:58

Thank you, you suggested replacement was not working so I have installed swfobject 1.5 and now it is working fine in both browsers. Thank you for your help.

Pavel
_________________________________
Please visit my personal gallery: http://www.pavelpola.cz (mostly B&W pictures, Prague, nature, people)
 
yuio

Joined: 2010-04-09
Posts: 4
Posted: Sun, 2010-04-11 01:06

HELLO

Great job with this modification. I've test it on my site. I have two ideas to make it better and I hope You help me with it. I run gallery 2,3 and I paste code from abowe in to my album.tpl . Works fine. But... First, I would like to keep my left side menu witch slideshow, but somehow it owerwrite all gscontent ( so.write("gsContent"); ) Can You show me how to cover only thumbnail section and keep menu ? And second thing, Is it posible to hide slideshow and show regular content( i mean thumbnails ) when the user click some button ? The idea is to first show the slideshow , but left the way to watch thumbnails and come back to slideshow on the same album.tpl , or go to big picture on photo.tpl from both.

I'm soory for my syntax and ortography. I better read then write in english ;]

thanks in advance
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Sun, 2010-04-11 11:48

which theme are you using?
You don't need to use gsContent you can give your <div> any id you want.

Quote:
And second thing, Is it posible to hide slideshow and show regular content( i mean thumbnails ) when the user click some button ?

You could load the page with both the thumbs and the mini into two divs with unique IDs and hide one:

    <div id="themini" style="display:block;">
        <!-- code for the mini here -->
    </div>
    <div id="albumThumbs" style="display:none;">
        <!-- regular gallery thumnail code here -->
    </div>
    <input type="button" value="Show/Hide Thumbnails" onclick="toggle('themini');toggle('albumThumbs');"/>
    <script type="text/javascript">
        function toggle(obj){
            var o = document.getElementById(obj);
            if (o.style.display == 'none') {
                o.style.display = 'block';
            }
            else {
                o.style.display = 'none';
            }
        }
    </script>

untested

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
 
Dayo

Joined: 2005-11-04
Posts: 1642
Posted: Sun, 2010-04-11 19:04

Bookmarking this for later consideration.

--
dakanji.com
 
yuio

Joined: 2010-04-09
Posts: 4
Posted: Sun, 2010-04-11 23:56

Hi
Thanks for help. This is exactly what I wanted. Of corse I messed up something... :( But from start... I use carbon theme. I done what You told me. It fix some problems, but in the case of toggle button no metter where I paste this javascript code it ruin whole template. I think that I done just some simple mistake. Please take a look.

<td id="albumThumbsall" >
        <div id="themini" style="display:block; width: 924px;">

    {if $theme.item.id !== 0} 
{literal}

{literal}
<script type="text/javascript">
// <![CDATA[
function loadHandler(evt){
        if (evt.persisted) {
            return;
        }

var so = new SWFObject("http://www.artphotofactory.com/photoblog/minislideshow.swf", "minislideshow", "800", "800", "9.0.115.0", "ffffff");
so.addParam("flashVars", "xmlUrl=http://www.artphotofactory.com/photoblog/mediaRss.php?g2_itemId={/literal}{$theme.item.id}{literal}&linkTarget=false&linkTarget=_self&shuffle=false&showDropShadow=false&useFull=true&delay=4&loop=true&transInType=Fade&showControls=false&transOutType=Fade&showTitle=false&roundedMask=false");
so.addParam("wmode", "transparent");
so.addParam("allowFullscreen", "false");
so.addParam("allowScriptAccess", "always");
so.write("albumThumbsall");
 }
    
    if ("onpagehide" in window) {
        window.addEventListener("pageshow", loadHandler, false);
    } else {
        if (document.addEventListener) {
            window.addEventListener("load", loadHandler, false);
        }
        if (window.attachEvent) {
            window.attachEvent('onload', loadHandler);
        }
    }

// ]]>
</script>
{/literal}
{/if}

 </div>
   <input type="button" value="Show/Hide Thumbnails" onclick="toggle('themini');toggle('albumThumbs');"/>
    <script type="text/javascript">
        function toggle(obj){
            var o = document.getElementById(obj);
            if (o.style.display == 'none') {
                o.style.display = 'block';
            }
            else {
                o.style.display = 'none';
            }
        }
    </script>
	      {if !count($theme.children)}
	      <div class="giDescription gbEmptyAlbum">
		<h3 class="emptyAlbum">
		  {g->text text="This album is empty."}
		  {if isset($theme.permissions.core_addDataItem)}
		  <br/>
		  <a href="{g->url arg1="view=core.ItemAdmin" arg2="subView=core.ItemAdd"
				   arg3="itemId=`$theme.item.id`"}">
		    {g->text text="Add a photo!"}		  </a>
		  {/if}		</h3>
	      </div>
	      {else}
	      {assign var="childrenInColumnCount" value=0}
	      <div class="gsContentAlbum" id="albumThumbs" style="display:none;">

		<table id="gsThumbMatrix">
		  <tr valign="top">
		    {foreach from=$theme.children item=child}

		    {* Move to a new row *}
		    {if ($childrenInColumnCount == $theme.params.columns)}		  </tr>
		  <tr valign="top">
		    {assign var="childrenInColumnCount" value=0}
		    {/if}

		    {assign var=childrenInColumnCount value="`$childrenInColumnCount+1`"}
		    <td class="{if $child.canContainChildren}giAlbumCell{else}giItemCell{/if}"
			style="width: {$theme.columnWidthPct}%">
		      {if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')}
		        {assign var=frameType value="albumFrame"}
		        {capture assign=linkUrl}{g->url arg1="view=core.ShowItem"
						        arg2="itemId=`$child.id`"}{/capture}
		      {else}
		        {assign var=frameType value="itemFrame"}
			{capture assign=linkUrl}{strip}
			  {if $theme.params.dynamicLinks == 'jump'}
			    {g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}
			  {else}
			    {g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}
			  {/if}
			{/strip}{/capture}
		      {/if}
		      <div>
                        {strip}
			{if isset($theme.params.$frameType) && isset($child.thumbnail)}
			{g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType
				      width=$child.thumbnail.width height=$child.thumbnail.height}
			  <a href="{$linkUrl}">
			    {g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}			  </a>
			{/g->container}
			{elseif isset($child.thumbnail)}
			  <a href="{$linkUrl}">
			    {g->image item=$child image=$child.thumbnail class="giThumbnail"}			  </a>
			{else}
			  <a href="{$linkUrl}" class="giMissingThumbnail">
			    {g->text text="no thumbnail"}			  </a>
			{/if}
                        {/strip}		      </div>

		      <div align="left">{g->block type="core.ItemLinks" item=$child links=$child.itemLinks}
		        
		        {if !empty($child.title)}
		        {if $child.canContainChildren}
		        <table width="100%" cellpadding="0" cellspacing="0">
		          <tr>
		            <td width="5%" height="36" class="giTitleIcon">
		              <img src="{g->url href="themes/carbon/images/album.png"}" alt=""/>			    </td>
			              <td>
			                <p align="left" class="giTitle">{$child.title|markup}</p>			    </td>
			            </tr>
		                </table>
		        {else}		        </div>
		      <p align="left" class="giTitle">{$child.title|markup}</p>
			  <div align="left">{/if}
			    {/if}
			    
			    {if !empty($child.summary)}			    </div>
			  <p align="left" class="giDescription">
			{$child.summary|markup|entitytruncate:256}		      </p>
		      <div align="left">{/if}
		        
		        {if !$theme.params.itemDetails}
		        {g->block type="core.ItemInfo"
		        item=$child
		        showSummaries=true
		        class="giInfo"}
		        {else}
		        {if ($child.canContainChildren && $theme.params.showAlbumOwner) ||
		        (!$child.canContainChildren && $theme.params.showImageOwner)}
		        {assign var="showOwner" value=true}
		        {else}
		        {assign var="showOwner" value=false}
		        {/if}
		        {g->block type="core.ItemInfo"
		        item=$child
		        showDate=false
		        showOwner=$showOwner
		        showSize=false
		        showViewCount=true
		        showSummaries=true
		        class="giInfo"}
		        {/if} </div></td>
		    {/foreach}

		    {* flush the rest of the row with empty cells *}
		    {section name="flush" start=$childrenInColumnCount loop=$theme.params.columns}
		    <td>&nbsp;</td>
		    {/section}		  </tr>
		</table>
	      </div>
	      {/if}	    </td>

And one more thing. This loadHandler... It shows for fiew seconds some code text in time when the slideshow loads. Maby I'm little paranoic but it's annoying...
Thanks again for Your help.
 
suprsidr
suprsidr's picture

Joined: 2005-04-17
Posts: 8339
Posted: Mon, 2010-04-12 00:08

surround your javascript with literal tags:

{literal}
    <script type="text/javascript">
        function toggle(obj){
            var o = document.getElementById(obj);
            if (o.style.display == 'none') {
                o.style.display = 'block';
            }
            else {
                o.style.display = 'none';
            }
        }
    </script>
{/literal}

-s
FlashYourWeb and Your Gallery with The E2 XML Media Player for Gallery2
 
yuio

Joined: 2010-04-09
Posts: 4
Posted: Mon, 2010-04-12 06:24

Ewerything works fine. Thanks for Your time.
I post all again to other interested.

 <td>
          <input type="button" class="giTitle" onclick="toggle('bb');toggle('min');" value="Show/Hide Thumbnails"/>
   {literal}
    <script type="text/javascript">
        function toggle(obj){
            var o = document.getElementById(obj);
            if (o.style.display == 'none') {
                o.style.display = 'block';
            }
            else {
                o.style.display = 'none';
            }
        }
    </script>
{/literal}
        <div id="bb"></div>
  
	      {if !count($theme.children)}
	      <div class="giDescription gbEmptyAlbum">
		<h3 class="emptyAlbum">
		  {g->text text="This album is empty."}
		  {if isset($theme.permissions.core_addDataItem)}
		  <br/>
		  <a href="{g->url arg1="view=core.ItemAdmin" arg2="subView=core.ItemAdd"
				   arg3="itemId=`$theme.item.id`"}">
		    {g->text text="Add a photo!"}		  </a>
		  {/if}		</h3>
	      </div>
	      {else}
	      {assign var="childrenInColumnCount" value=0}
	      <div class="gsContentAlbum" id="min" style="display:none;">

		<table id="gsThumbMatrix">
		  <tr valign="top">
		    {foreach from=$theme.children item=child}

		    {* Move to a new row *}
		    {if ($childrenInColumnCount == $theme.params.columns)}		  </tr>
		  <tr valign="top">
		    {assign var="childrenInColumnCount" value=0}
		    {/if}

		    {assign var=childrenInColumnCount value="`$childrenInColumnCount+1`"}
		    <td class="{if $child.canContainChildren}giAlbumCell{else}giItemCell{/if}"
			style="width: {$theme.columnWidthPct}%">
		      {if ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')}
		        {assign var=frameType value="albumFrame"}
		        {capture assign=linkUrl}{g->url arg1="view=core.ShowItem"
						        arg2="itemId=`$child.id`"}{/capture}
		      {else}
		        {assign var=frameType value="itemFrame"}
			{capture assign=linkUrl}{strip}
			  {if $theme.params.dynamicLinks == 'jump'}
			    {g->url arg1="view=core.ShowItem" arg2="itemId=`$child.id`"}
			  {else}
			    {g->url params=$theme.pageUrl arg1="itemId=`$child.id`"}
			  {/if}
			{/strip}{/capture}
		      {/if}
		      <div>
                        {strip}
			{if isset($theme.params.$frameType) && isset($child.thumbnail)}
			{g->container type="imageframe.ImageFrame" frame=$theme.params.$frameType
				      width=$child.thumbnail.width height=$child.thumbnail.height}
			  <a href="{$linkUrl}">
			    {g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail"}			  </a>
			{/g->container}
			{elseif isset($child.thumbnail)}
			  <a href="{$linkUrl}">
			    {g->image item=$child image=$child.thumbnail class="giThumbnail"}			  </a>
			{else}
			  <a href="{$linkUrl}" class="giMissingThumbnail">
			    {g->text text="no thumbnail"}			  </a>
			{/if}
                        {/strip}		      </div>

		      <div align="left">{g->block type="core.ItemLinks" item=$child links=$child.itemLinks}
		        
		        {if !empty($child.title)}
		        {if $child.canContainChildren}
		        <table width="100%" cellpadding="0" cellspacing="0">
		          <tr>
		            <td width="5%" height="36" class="giTitleIcon">
		              <img src="{g->url href="themes/carbon/images/album.png"}" alt=""/>			    </td>
			              <td>
			                <p align="left" class="giTitle">{$child.title|markup}</p>			    </td>
			            </tr>
		                </table>
		        {else}		        </div>
		      <p align="left" class="giTitle">{$child.title|markup}</p>
			  <div align="left">{/if}
			    {/if}
			    
			    {if !empty($child.summary)}			    </div>
			  <p align="left" class="giDescription">
			{$child.summary|markup|entitytruncate:256}		      </p>
		      <div align="left">{/if}
		        
		        {if !$theme.params.itemDetails}
		        {g->block type="core.ItemInfo"
		        item=$child
		        showSummaries=true
		        class="giInfo"}
		        {else}
		        {if ($child.canContainChildren && $theme.params.showAlbumOwner) ||
		        (!$child.canContainChildren && $theme.params.showImageOwner)}
		        {assign var="showOwner" value=true}
		        {else}
		        {assign var="showOwner" value=false}
		        {/if}
		        {g->block type="core.ItemInfo"
		        item=$child
		        showDate=false
		        showOwner=$showOwner
		        showSize=false
		        showViewCount=true
		        showSummaries=true
		        class="giInfo"}
		        {/if} </div></td>
		    {/foreach}

		    {* flush the rest of the row with empty cells *}
		    {section name="flush" start=$childrenInColumnCount loop=$theme.params.columns}
		    <td>&nbsp;</td>
		    {/section}		  </tr>
		</table>
	      </div>
	      {/if}	    </td>