Getting MaxiGallery to work with Jquery Cycle Plugin

264 Posts

BnH Reply #1, 16 years, 9 months ago

I’m trying to get my page to look like this http://malsup.com/jquery/cycle/pager2.html.. it seems the Javascript might be the problem, but to fix it I would need some maxigallery commands which is why im here..

Here is the javascript

<script type="text/javascript">
$(function() {
    $('#listingslideshow').after('<ul id="nav">').cycle({
        fx:     'turnDown',
        speed:  'fast',
        timeout: 0,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
        }
    });
});
</script>

I think the problem is the bottom line where it says <img src="’ + slide.src + ’" width="50" height="50" /> because it comes up as "undefined" when on the actual site.. if i put in the image location it works fine. How do I target my maxigallery images so i can place them in the header instead of usin slide.src?

MaxiGallery call

[!MaxiGallery? &display=`normal` &upload_field_count=`6` &disable_js_libs=`0` &quality_pic=`100` &css=`assets/c/maxi.css` &max_big_size=`800` &thumb_use_dropshadow=`0` &max_pic_size=`484` &order_direction=`DESC` &galleryPictureTpl=`galPicProperty` &embedtype=`external` &pics_per_row=`3`!]

Also, how would I remove the phpthumb from the galPicProperty?

<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]">
	 	
<img src="[*myimage:phpthumb=`h=400&w=484&q=100&zc=1#[+maxigallery.path_to_gal+][+maxigallery.picture.filename+]#1`*]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
	</a>
	[+maxigallery.picture.title:isnot=``:then=`
		<p style="width: [+maxigallery.picture_width_thumb+]px;">
		[+maxigallery.picture.title:htmlent+]
		</p>
	`+]

4,213 Posts

doze Reply #2, 16 years, 9 months ago

Well... I guess that script wants the thumbnail html in this type of format:

<div id="slideshow" class="pics">
    <img src="urlhere" width="200" height="200" />
    <img src="urlhere" width="200" height="200" />
    <img src="urlhere" width="200" height="200" />
</div>

And that’s not what your snippet call outputs right now. You need to create custom galleryOuterTpl and galleryPictureTpl that makes such format.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

264 Posts

BnH Reply #3, 16 years, 9 months ago

Quote from: doze at Dec 22, 2009, 05:41 AM

Well... I guess that script wants the thumbnail html in this type of format:
<div id="slideshow" class="pics">
    <img src="urlhere" width="200" height="200" />
    <img src="urlhere" width="200" height="200" />
    <img src="urlhere" width="200" height="200" />
</div>
And that’s not what your snippet call outputs right now. You need to create custom galleryOuterTpl and galleryPictureTpl that makes such format.

So the Javascript is fine? I’m not too sure on how to edit those 2 files, is there a document so I can get the correct output? I noticed that I always has "<ul class="thumbs"></ul>" wrapped around it.. whats the difference between galleryOuterTpl and galleryPictureTpl?

4,213 Posts

doze Reply #4, 16 years, 9 months ago

Look at the default templates see the used placeholders from maxigalley wiki page.

galleryOuterTpl is a wrapper template for the thumbnails. You need to create both as custom templates, galleryOuterTpl and galleryPictureTpl.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."