We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

MaxiGallery Query

    • 51267
    • 25 Posts
    ballack13 Reply #1, 16 years, 2 months ago
    Folks,

    I have installed MaxiGallery (successfully - huh)

    However MaxiGallery goes outside the container which it is meant to as if it is overwriting the existing css.

    Basically I have followed the install instructions in the wiki and made the following call
    [!MaxiGallery? &display=`childgalleries`!]

    The does give me the functionality which I require but it does not fit in the div that it is placed.

    Edit: All I need to do is be able to upload a few images and display

    Any suggestions?
      • 26016
      • 561 Posts
      samba Reply #2, 16 years, 2 months ago
      To get the best answer for that, you’d need to provide some more info, like a link, which flavor of gallery you’re using, what your call is, and so on. However, a couple thoughts...

      Get to know this handy parameter, it’s my favorite, and change to taste:
      &pics_per_row=`3`


      Other useful parameters have to do with image size and thumbnail size. If you change those in your call, you’ll need to delete and re-upload your images to get the new sizes.

      You can also look at the generated code. Containers are not explicitly sized, and you could give them a specific width with CSS. As I recall, one Maxi flavor even uses the dreaded CENTER tag. smiley

      Here’s lots of info:
      http://wiki.modxcms.com/index.php/MaxiGallery

      good luck, Dave
        MODx and Wordpress development
        Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4
        • 51267
        • 25 Posts
        ballack13 Reply #3, 16 years, 2 months ago
        Its a bit annoying me because when I copy the html output from the gallery page into another page it is laid out correctly. Must study it more I guess laugh
          • 51267
          • 25 Posts
          ballack13 Reply #4, 16 years, 2 months ago
          Well I tried using the ModxHost theme and a simple theme I created using blueprint and all is working correctly so it is just a CSS issue in the theme I am using
            • 51267
            • 25 Posts
            ballack13 Reply #5, 16 years, 2 months ago
            This is the html output in the container

            <div class="content_text_area">
              <div class="content_text_area_font"> 
			  <p><div class="managecontainer">
	<a name="top"></a>
	<p>
		
	</p>
	<p>
		Gallery description:
		<br />
		
	</p>
	<div class="pictureform">
		<form action="/index.php?id=32" method="post" name="editform" id="editform">
			<input type="hidden" name="action" value="edit_pics" /><input type="hidden" name="mode" value="admin" /><input type="hidden" name="number" value="1" />
	
			<input type="button" value="Back to normal view" onclick="location.href='/index.php?id=32'"/>
			<input type="submit" value="Save changes" />
			<input type="button" value="Sort pictures" id="dragButton" onclick="openDragWin('/index.php?id=32&dragsort=1', 600, 500)" />
	
			<br /><br />
			<a href="/index.php?id=32#uploadform">Jump to upload form</a>
			<br /><br />
		
			<div class="managepicturecontainer">
	<input type="hidden" name="pic_id0" value="5"/>
	<input type="hidden" name="modified0" id="modified0" value="no"/>
	<div class="managepicture">
		<a href="/assets/galleries/32/cake_bg.png" target=_new>
			<img src="/assets/galleries/32/tn_cake_bg.png" alt=" » Click to zoom ->"/>
		</a>
	</div>
	<div class="shortfields">
		ID: 5
		<br />
		Delete:
		<input type="checkbox" name="delete0" value="yes" title="Check to delete this picture"/>
		<br />
		Hide:
		<input type="checkbox" name="hide0" value="yes" title="Check to hide this picture from the gallery" onClick="document.editform.modified0.value='yes'" />
		<br />
		Position:
		<input type="text" size="3" name="pos0" id="pos0" onKeyDown="document.editform.modified0.value='yes'" value=""/>
	</div>
	<br class="clearboth"/>
	Title:
	<br/>
	<textarea name="title0" rows="2" cols="40" onKeyDown="document.editform.modified0.value='yes'"></textarea>
	<br />
	Description:
	<br/>
	<textarea name="descr0" rows="4" cols="40" onKeyDown="document.editform.modified0.value='yes'"></textarea>
	<br />
	<hr />
</div>
		
		</form>
	</div>
	
	<div class="uploadform">
		<a href="/index.php?id=32#top">Back to top</a>
		<a name="uploadform"></a>
		<br />
		
		
			<br /><br />
			<form action="/index.php?id=32" method="post" enctype="multipart/form-data" name="uploadform">
				<input type="hidden" name="action" value="upload_pics" /><input type="hidden" name="mode" value="admin" />

				<div class="uploadcounter">
	1
</div>
<div class="uploadfile">
	<input name="file0" type="file" />
</div><div class="uploadcounter">
	2
</div>
<div class="uploadfile">
	<input name="file1" type="file" />
</div><div class="uploadcounter">
	3
</div>
<div class="uploadfile">
	<input name="file2" type="file" />
</div><div class="uploadcounter">
	4
</div>
<div class="uploadfile">
	<input name="file3" type="file" />
</div><div class="uploadcounter">
	5
</div>
<div class="uploadfile">
	<input name="file4" type="file" />
</div><div class="uploadcounter">
	6
</div>
<div class="uploadfile">
	<input name="file5" type="file" />
</div><div class="uploadcounter">
	7
</div>
<div class="uploadfile">
	<input name="file6" type="file" />
</div><div class="uploadcounter">
	8
</div>
<div class="uploadfile">
	<input name="file7" type="file" />
</div><div class="uploadcounter">
	9
</div>
<div class="uploadfile">
	<input name="file8" type="file" />
</div><div class="uploadcounter">
	10
</div>
<div class="uploadfile">
	<input name="file9" type="file" />
</div>
	
				<br class="clearboth" />
	
				<input type="submit" value="Upload pictures" />
			</form>
		
	</div>
	<br class="clearboth" />
	<hr />
	
	<div class="deleteform">
		<form action="/index.php?id=32" method="post" name="deleteform">
			<input type="hidden" name="action" value="delete_pics" /><input type="hidden" name="mode" value="admin" /><input type="hidden" name="number" value="1" />
			<input type="submit" value="Delete all pictures" onClick="return confirm('Are you sure you want to delete all pictures?')" />
		</form>
	</div>
	
	<div class="synchform">
    	<form action="/index.php?id=32" method="post" name="synchform">
			<input type="hidden" name="action" value="gallery_synch" /><input type="hidden" name="mode" value="admin" />
            <input type="submit" value="Resynch Gallery" />
        </form>
    </div>
    
	<br class="clearboth" />
	<hr />
	    
</div></p>
			  <br/>
			  <br/>
              </div>
            </div>


            my stylesheet

            a {
    	color: #ff0000;
}
a:hover {
    	color: #2400ff;
} 
a:visited {
	color: #2400ff:
}
body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	background-color:#FFF;
	background-image:url(../images/main_body_bg.jpg);
	background-repeat:repeat-y;
	padding:0;
	margin:0;
}

.page_wrapper {
	width:960px;
	margin:0 auto;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
.float_left {
	float:left;
}
.float_right {
	float:right;
}
.clear_both {
	clear:both;
}
.header_area {
	background-image:url(../images/header_bg.png);
	background-repeat:repeat-x;
	height:118px;
}
.header_internal {
	width:960px;
	margin:0 auto;
}
.main_body_internal {
	width:960px;
	margin:0 auto;
}
.footer_internal {
	background-image:url(../images/footer_bg.png);
	background-repeat:no-repeat;
 width:960px;
	margin:0 auto;
	padding-top:5px;
}
.home_link {
	background-image:url(../images/home.png);
	background-repeat:no-repeat;
	width:67px;
	height:77px;
}
.home_link :hover {
 .background-image:url(../images/home_replace.png);
 .background-repeat:no-repeat;
	width:67px;
 .height:77px;
}
.home_link:hover {
	background-image:url(../images/home_replace.png);
	background-repeat:no-repeat;
	width:67px;
	height:77px;
}
.flavours_link {
	background-image:url(../images/flavours.png);
	background-repeat:no-repeat;
	width:71px;
	height:77px;
}
.flavours_link :hover {
 .background-image:url(../images/flavours_replace.png);
 .background-repeat:no-repeat;
	width:71px;
 .height:77px;
}
.flavours_link:hover {
	background-image:url(../images/flavours_replace.png);
	background-repeat:no-repeat;
	width:71px;
	height:77px;
}
.gallery_link {
	background-image:url(../images/gallery.png);
	background-repeat:no-repeat;
	width:74px;
	height:77px;
}
.gallery_link :hover {
 .background-image:url(../images/gallery_replace.png);
 .background-repeat:no-repeat;
	width:74px;
 .height:77px;
}
.gallery_link:hover {
	background-image:url(../images/gallery_replace.png);
	background-repeat:no-repeat;
	width:74px;
	height:77px;
}
.contact_link {
	background-image:url(../images/contact.png);
	background-repeat:no-repeat;
	width:73px;
	height:77px;
}
.contact_link :hover {
 .background-image:url(../images/contact_replace.png);
 .background-repeat:no-repeat;
	width:73px;
 .height:77px;
}
.contact_link:hover {
	background-image:url(../images/contact_replace.png);
	background-repeat:no-repeat;
	width:73px;
	height:77px;
}
.blog_link {
	background-image:url(../images/blog.png);
	background-repeat:no-repeat;
	width:60px;
	height:77px;
}
.blog_link :hover {
 .background-image:url(../images/blog_replace.png);
 .background-repeat:no-repeat;
	width:60px;
 .height:77px;
}
.blog_link:hover {
	background-image:url(../images/blog_replace.png);
	background-repeat:no-repeat;
	width:60px;
	height:77px;
}
.flash_area {
	padding-left:10px;
}
.main_content_area {
	margin-top:15px;
	margin-left:10px;
}
.main_content_area_bg_upper {
	background-image:url(../images/content_upper.png);
	background-repeat:no-repeat;
	width:942px;
	height:27px;
}
.main_content_area_bg_middle {
	background-image:url(../images/content_middle.png);
	background-repeat:repeat-y;
	width:942px;
	background-color:#ff7e94;
}
.main_content_area_bg_bottom {
	background-image:url(../images/content_bottom.png);
	background-repeat:no-repeat;
	width:942px;
	height:29px;
}
.cake_bg_area {
	background-image:url(../images/cake_bg_area.png);
	background-repeat:no-repeat;
	width:900px;
	margin-left:12px;
 .margin-top:-1px;
	background-color:#ff7e94;
}
.heading_area {
	margin-left:25px;
	padding-top:15px;
}
.heading_text {
	font-family:"Giddyup Std", verdana;
	font-size:54px;
	color:#2d240e;
}
.heading_text a {
	font-family:"Giddyup Std", verdana;
	font-size:54px;
	color:#2d240e;
	text-decoration:none;
}
.heading_text :hover {
	font-family:"Giddyup Std", verdana;
	font-size:54px;
	color:#722e00;
	text-decoration:none;
}
.content_text_area {
	margin-left:25px;
	margin-top:15px;
}
.content_text_area_font {
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	color:#0e1211;
	width:875px;
	line-height:22px;
}
.brown_text {
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	color:#722e00;
	line-height:22px;
}
.red_text {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	color:#ff0000;
	line-height:22px;
}
.blue_text {
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	color:#2400ff;
	line-height:22px;
}
.blue_text a {
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	color:#2400ff;
	line-height:22px;
}
.blue_text :hover {
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	color:#2400ff;
	line-height:22px;
}
.black_text {
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	color:#0e1211;
	width:875px;
	line-height:22px;
	text-decoration:none;
}
.copyrights_text {
	padding-top:5px;
	padding-bottom:10px;
	font-weight:bold;
	line-height:18px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	text-align:center;
	color:#000;
}
.flash_area
{
	background-image:url(../images/flash-bg.png);
	background-repeat:no-repeat;
	width:919px;
	height:317px;
	margin-left:20px;
}
.flash
{
	padding-top:5px;
}
.footer_area
{
	margin-top:15px;
}


            and the maxigallery stylesheet
            ul.thumbs li {
	list-style: 		none;
	float: 				left;
	display: 			block;
	list-style-image: 	none !important;
	margin:				5px 5px 0 5px !important;
}
ul.thumbs {
	list-style: 		none;
	margin: 			0;
	padding: 			0;
	clear: 				both;
}
ul.thumbs li img {
	border:				none;
	margin:				0 !important;
}
ul.thumbs li a {
	background:			none !important;
	text-decoration:	none;
	border: 			0;
}
ul.thumbs li p {
	overflow:			hidden;
}
.thumbs .clearboth { 
	clear: 				both; 
}
.childscontainer {
	margin-bottom:		20px;
	float:				left;
}
.thumbscontainer {
	margin-bottom:		20px;
	float:				left;
}
.pagenumbers {
	margin-bottom:		20px;
}
.picturecontainer {
	text-align:			center;
}
.picturecontainer .title {
	font-weight:		bold;
	margin-top:			20px;
}
.picturecontainer .picture img {
	border:				none;
	margin:				0 !important;
}
.picturecontainer .picture a {
	background:			none !important;
	text-decoration:	none;
	border: 			0;
}
.managecontainer {
    float: 				left;
}
.managecontainer textarea {
	width:				395px;
}
.managecontainer hr {
	width:				400px;
	text-align: 		left;
	margin: 			20px auto 20px 0;
}
.pictureform .managepicture {
	float:				left;
	clear:				left;
}
.pictureform .shortfields {
	margin-left: 		20px;
	float:				left;
}
.pictureform .clearboth {
	clear:				both;
}
.uploadcounter {
	width: 				20px;
	margin-bottom: 		10px;
	float:				left;
	clear:				left;
}
.uploadfile {
	margin-bottom: 		10px;
	float:          	none;
}
.uploadfile input {
	width:				385px;	
}
.uploadform {
	margin-top:			20px;
	margin-bottom:		-10px;
   	clear: 				both;
}
.uploadform .clearboth {
	clear:				both;
}
.slideshowwrapper {
	text-align:			center;
}
.deleteform {
	float:				left;
}
.synchform {
	float:				left;
}


            Can anyone help me out as this is 99% done
              • 26016
              • 561 Posts
              samba Reply #6, 16 years, 2 months ago
              Sorry, I almost never check that type of problem without a link. It’s too inconvenient to just have code. It’s the "price" I charge for free help. wink Someone else may chime in, though.
                MODx and Wordpress development
                Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4
                • 7923
                • 4,213 Posts
                doze Reply #7, 16 years, 2 months ago
                Yea, need a link to the site to check it out.


                  "He can have a lollipop any time he wants to. That's what it means to be a programmer."
                  • 51267
                  • 25 Posts
                  ballack13 Reply #8, 16 years, 2 months ago
                  Sorry guys its all local atm. Its on the backburner for a day or two so hopefully after I’m refreshed it will be a doddle.

                  Thanks nonetheless grin