Maxigallery: First picture holder

117 Posts

0ad Reply #1, 17 years, 4 months ago

hi

im tinkering with a really simple rollover gallery (http://www.destinedtodesign.com/gallery/) within maxigallery - just wondering if theres a placeholder i can use to load as the first picture (in the example that would be image 1)?

thanks in advance, great snippet!

0

4,213 Posts

doze Reply #2, 17 years, 4 months ago

You mean that you want to find out the url to the first image of the gallery?

Unfortunately, no, there is no such parameter. But you can use javascript for example to find the url from the dom tree.

And ofcourse you could use another maxigallery call to print that out to correct place, but that would be unneeded overhead for the page rendering.. then again if you don’t mind that and don’t want to use JS..

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

117 Posts

0ad Reply #3, 17 years, 4 months ago

hi doze

yes please, thats right, the url of the first image is exactly what i need. i dont mind using javascript (no idea how to do it though!)

4,213 Posts

doze Reply #4, 17 years, 4 months ago

If you use jQuery for example, take a look at these:
http://docs.jquery.com/Selectors
http://docs.jquery.com/Attributes
http://docs.jquery.com/Traversing

You can do it with pure javascript also without any libraries, but those are faster / easier to use.. although give little overhead to page load.

anyways, if you have the html source like in the link above, eg:

<div id="gal_enlarge_container"><img src="gallery/images/01.jpg" alt="" border="0" name="enlarge" /></div>

			<ul id="gal_thumb_container">

				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/01.jpg',0)"><img src="gallery/thumbnails/01.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/02.jpg',1)"><img src="gallery/thumbnails/02.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/03.jpg',1)"><img src="gallery/thumbnails/03.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/04.jpg',1)"><img src="gallery/thumbnails/04.jpg" alt="" name="a1" border="0" /></a></li>

				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/05.jpg',1)"><img src="gallery/thumbnails/05.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/06.jpg',1)"><img src="gallery/thumbnails/06.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/07.jpg',1)"><img src="gallery/thumbnails/07.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/08.jpg',1)"><img src="gallery/thumbnails/08.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/09.jpg',1)"><img src="gallery/thumbnails/09.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/10.jpg',1)"><img src="gallery/thumbnails/10.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/11.jpg',1)"><img src="gallery/thumbnails/11.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/12.jpg',1)"><img src="gallery/thumbnails/12.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/13.jpg',1)"><img src="gallery/thumbnails/13.jpg" alt="" name="a1" border="0" /></a></li>

				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/14.jpg',1)"><img src="gallery/thumbnails/14.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/15.jpg',1)"><img src="gallery/thumbnails/15.jpg" alt="" name="a1" border="0" /></a></li>
				<li><a href="#" onMouseOver="MM_swapImage('enlarge','','gallery/images/16.jpg',1)"><img src="gallery/thumbnails/16.jpg" alt="" name="a1" border="0" /></a></li>

			</ul>

You can access for example the url of the first thumbnail in jQuery like this:

var src = $("#gal_thumb_container li:first-child a img").attr("src");

But because the normal image url is in the onMouseOver attribute, getting is a bit more complex:

var onmouseover = $("#gal_thumb_container li:first-child a").attr("onMouseOver");
var arr = onmouseover.split("'"); //url is in arr[5]

and you can put that url to the image placeholder by adding this to the above code:

$("#gal_enlarge_container img").attr("src", arr[5]);

That should work.. try it.

If you don’t like to use js, you can run another maxigallery call with custom templates and with &limit=`1` parameter to get just the first image and then in your custom gallerypicturetpl just output the url of the normal image, nothing else.

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

117 Posts

0ad Reply #5, 17 years, 4 months ago

thank you again!

i used the later (made much more sense to keep it simple!)

[!MaxiGallery? &display=`normal` &embedtype=`rollover` &limit=`1` &is_target=`1`!]

and in galleryoutertpl.html added (below the [+maxigallery.embedtype:is=`smoothgallery`:then=`... block):

[+maxigallery.embedtype:is=`rollover`:then=`
	<div id="imagecontainer">
[+maxigallery.pictures+]
</div>
`+]
[+maxigallery.embedtype:isnot=`rollover`:then=`

and

`+]

at the end of the page.

then in gallerypicturetpl.html added (below the [+maxigallery.embedtype:is=``:then=`... block):

[+maxigallery.embedtype:is=`rollover`:then=` 

<img border="0" name="enlarge" alt="" src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"/>

`+]

[+maxigallery.embedtype:isnot=`rollover`:then=`

and

`+]

at the end of the page.

my thumbnails are displayed with a little bit of custom stuff too, i can post it if anyones interested, it just follows the http://www.destinedtodesign.com/gallery/ basically...

4,213 Posts

doze Reply #6, 17 years, 4 months ago

It would be good if you’d post the whole setup of your gallery in some topic.. those kind of little "articles" give great help for others to build customized galleries.

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

117 Posts

0ad Reply #7, 17 years, 4 months ago

yi-yeah.

So my thumbnail call is:

[!MaxiGallery? &display=`embedded` &embedtype=`swap` &max_thumb_size=`40x40` &max_pic_size=`440x440` &js=`assets/js/rollover.js`!]

and I amended my gallerypicturetpl.html by adding:

[+maxigallery.embedtype:is=`swap`:then=` 

	<a onmouseover="MM_swapImage('enlarge','','[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]',0)" href="[~[*id*]~]#">

`+]

we can ignore the &max size params, you’d want youre own in there... and the js file is from http://www.destinedtodesign.com/gallery/assets/js/rollover.js.

i hope you enjoy this snippet as much as i do =)

0

4 Posts

deano_martin Reply #8, 17 years, 2 months ago

Thanks for this thread, I was very surprised to find an active thread, on this topic!
I have a problem though. You can see what I mean here: http://www.newfrontierbuilders.net/index.php?id=14
I’m not sure if this is was an oversight on my part or what, but I’m hoping you can help me resolve it.

Thanks in advance

deano