Smashly Community Forums » PhotoSmash Help » include photosmash in accordion

About this topic

  • Posted by traditionalpainter 1 year ago. There are 11 posts. The latest reply is from byron.
  • This topic is not resolved

No tags yet.

  1. traditionalpainter
    Member
    Posted 1 year ago #

    Hi , great plugin, got it working just as I want. Main issue I am having, due to lack of basic knowledge, is how to include the gallery in an accordion.

    On the site http://traditionalpainter.com/andy-crichton I have created a multi author profilepage.php and can display the gallery using [code] <?php echo do_shortcode("[photosmash]"); ?>[/code] but I want it to be hidden until toggled on by clicking on the My Photos image.

    I just dont have the first idea how to do this with a jquery accordion that works for this template page only. Can you please point me in the right direction?

  2. byron
    Key Master
    Posted 1 year ago #

    Hi TP,

    Glad you're liking PhotoSmash. I haven't tried enclosing the gallery in an accordion before, but it will probably work.

    You could try something like this:

    1) enclose your shortcode within a DIV that hides the gallery
    2) set up a link that uses jQuery to toggle the div's viz

    Something like this:

    <a href='javascript: void(0);' onclick='jQuery("#gallery_hider").toggle(); return false;'>Toggle Gallery</a>
<div style='display: none;' id='gallery_hider'>[ your shortcode here ]</div>

    Cheers,
    Byron

  3. traditionalpainter
    Member
    Posted 1 year ago #

    hey byron, thanks for that. i have been playing with accordion code today, and also a tag jquery. Progress!

    Your toggle code works but the gallery layout is all screwed up. (I got the same effect with the tab accordion I did , ie it opens the gallery in a tab, but the layout is wrong

    I did some troubleshooting. If I use the shortcode normally on the page.php , the gallery displays perfectly, so the css is fine with no javascript influence.

    If I put the shortcode in the template page AND use your javascript toggle effect, it displays the toggle open gallery perfectly (and obviously the standard shortcode generated gallery too.)

    Any idea where i go looking for the conflict?

    many thanks, if i can get the photosmash gallery bit sorted I will be making sure every new member I get onboard my new site will know about it!!!

    cheers

  4. traditionalpainter
    Member
    Posted 1 year ago #

    Hi, not sure what I am looking at but this is what the source code found for jquery references on the page with the conflict. Is there any clue here? thanks.

    1 - header.php

<script type='text/javascript' src='http://traditionalpainter.com/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>

2 -<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script type="text/javascript">
	$(function() {
		$("#tabs").tabs({selected: null  });
	});
	</script>

</head>

3 - <a href='javascript: void(0);' onclick='jQuery("#gallery_hider").toggle(); return false;'>Toggle Gallery</a>
<div style='display: none;' id='gallery_hider'><div class="photosmash_gallery"><form><input type="hidden" id="_moderate_nonce" name="_moderate_nonce" value="f837a898bb" /></form><span class="bwbps_addphoto_link"><a href="TB_inline?height=300&width=300&inlineId=c3bwbps-formcont" onclick="bwbpsShowPhotoUpload(36, 1537, 'c3');" title="hand-painted kitchens & furniture Cheshire expert painting and decorating - Gallery Upload" class="thickbox">Add Photo</a></span><div id="c3bwbps-formcont" class="thickbox" style="display:none;">
      	<style type="text/css">
				<!--
				#ui-datepicker-div{z-index: 199;}
				-->
		</style>

4 - (in just above footer widget area) <script type='text/javascript' src='http://traditionalpainter.com/wp-includes/js/jquery/jquery.form.js?ver=2.02m'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var thickboxL10n = {

  5. byron
    Key Master
    Posted 1 year ago #

    Hello,

    One thing I notice is in the header.php:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    You should remove that line of code since it is loading jquery a second time and will cause problems with the upload.

    As far as the messed up layouts go, I'm a little stumped on that. I want to see what happens when you have a gallery in a jQuery UI tab. Maybe jQuery knows how to handle the sizing of those things. It's really messing up the sizing of the gallery the way I told you to try. Hopefully I can have a look tomorrow night.

    Cheers,
    Byron

  6. traditionalpainter
    Member
    Posted 1 year ago #

    Hi Byron, I am taking a slightly different approach with a slider effect, so far so good. The finished article should be of use to other PSmashers.

    One question, how do you get rid of the slideshow link, I have ticked the Advanced setting about Exclude PicLens javascript file:, but still get the link appear.`<img src="http://lite.piclens.com/images/PicLensButton.png"
    alt="PicLens" width="16" height="12" border="0" align="absmiddle"> </a>`

    Also what turns on (or more desirable, turns off) the Post bubble link underneath thumbnails.

    many thanks

  7. byron
    Key Master
    Posted 1 year ago #

    Great! Please do share when you're done. If you do a tutorial write up that would fit in the tutorial pages of this site, I'll be glad to give credit where due.

    To remove PicLens slideshow, 2 places to check...1) make sure there isn't piclens=true in your shortcode; 2) if you're using a custom layout, go to the Layouts Editor and edit your layout...make sure [piclens] isn't in the Wrapper field or any of the other fields there..if so, just remove it.

    The Post bubble link is probably being defined in your custom layout...you should be able to spot it. Just remove it if so. If not, you can email me the code you're using for the custom layout and I'll pull it out for you.

    Cheers,
    Byron

  8. traditionalpainter
    Member
    Posted 1 year ago #

    I followed your advice and from the custom layout section got rid of the piclens link and removed the div class related to that post.png. Something else learned!

    There is still a major foobar going on with the css for the gallery view layout. I have reset PS to default, specified the number of rows per column and images per page. And that is pretty much it.

    I have noticed that if I click on the photo slider tab before the page has finished loading, the images open correctly. Wait till it has fully loaded and the compressed display of images occurs. In the source page, at the bottom the photosmash javascript appears. Is that significant?

    <script type='text/javascript' src='http://traditionalpainter.com/wp-includes/js/thickbox/thickbox.js?ver=3.1-20100407'></script>
<script type='text/javascript' src='http://traditionalpainter.com/wp-content/plugins/contact-form-7/scripts.js?ver=2.3'></script>

<script type="text/javascript">
var tb_pathToImage = "http://traditionalpainter.com/wp-includes/js/thickbox/loadingAnimation.gif";
var tb_closeImage = "http://traditionalpainter.com/wp-includes/js/thickbox/tb-close.png";
</script>

		<!-- PhotoSmash JavaScript  -->
		<script type='text/javascript'>

			var tb_pathToImage = "http://traditionalpainter.com/wp-includes/js/thickbox/loadingAnimation.gif";
			var tb_closeImage = "http://traditionalpainter.com/wp-includes/js/thickbox/tb-close.png";

		</script>
		<!--stats_footer_test--></div>

    I have been looking elsewhere, editing http://traditionalpainter.com/hand-painted-kitchens "Recent examples of hand-painted kitchens" and PS gallery doesnt seem to create any space beneath the images and just overlaps or underlaps or does whatever it wants irrespective of text beneath it.

    Any ideas or is this too much trouble getting?

  9. byron
    Key Master
    Posted 1 year ago #

    TP,

    Try using the Std_Widget layout for that gallery and see if that helps. I noticed that in the NextGEN gallery that's working properly there, it uses DIV elements, while the PhotoSmash gallery is using UL & LI elements. It might be that DIVs behave properly while Lists don't.

    You can specify the layout in the shortcode like: [photosmash layout='Std_Widget'] or by setting it in the Gallery Settings (edit the gallery and change to the Std_Widget layout...just make sure that the shortcode doesn't specify some other layout if you do it this way).

    Hopefully this will move the ball down the field!

    Cheers,
    Byron

  10. traditionalpainter
    Member
    Posted 1 year ago #

    Byron, that was an inspired piece of advice, cheers! looks like it has solved a major layout problem. Much appreciated, and will definitely do a tutorial when the project is complete.

    thanks

    Andy

  11. byron
    Key Master
    Posted 1 year ago #

    Cool. Glad that worked...I'll be glad to add the Tut to the list...it's slowly growing ;-)

RSS feed for this topic