smooth gallery doesn't display

388 Posts

Terry Reply #1, 18 years, 2 months ago

Hi all

I’m try to create a simple slide show. But I’m stuck.

The manage pictures button appears. I can upload images, I can see them in the galleries folder. But no slide show. No images. Even if log out of manager, no slide show.

I’ve searched the forum for answers to no avail.

I created a chuck with the following code (which I copied from one of the forum entries and modified just bit).

[!MaxiGallery? &display=`embedded` &embedtype=`smoothgallery` &smoothgallery_timed=`true` &smoothgallery_height=`250` &smoothgallery_width=`448` &smoothgallery_showInfopane=`false` &smoothgallery_fadeDuration=`800` &smoothgallery_embedLinks=`false` &smoothgallery_delay=`4500` &smoothgallery_preloader=`true` &smoothgallery_showCarousel=`false` !]

I can see the html and the head entries generated. The paths all look ok and the js and css file are present in the appropriate directories.

I do have another maxigallery on another page using slimbox. No problems there.

I’m working on local wamp server. New install of modx 0.9.6.1p2. Maxigallery 0.5.2

How do I get the slide show to appear?

www.terrybarthdesign.com

4,213 Posts

doze Reply #2, 18 years, 2 months ago

Have you tried just with a call: [!MaxiGallery? &display=`embedded` &embedtype=`smoothgallery`!]

Have you tried the v0.6 test version?

Are there javascript errors when the page is rendered, see the javascript console or firebug console if you use firefox and have firebug extension installed.

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

388 Posts

Terry Reply #3, 18 years, 2 months ago

Hey Doze

Thanks for looking at this.

The shorter call has no effect. Haven’t tried the new test version. Is it stable enough to use on a client site?

Here’s what the js console says using your call. I didn’t know about that function in firebug. Cool!

However, I have no idea what to do about this. Understanding JS errors is not in my bag of tricks. Something is wrong with the imgPreloader.src?

this.galleryData[0] is undefined
doSlideShow()(1)jd.gallery.js (line 266)
initialize()(div#myGallery7.jdGallery, Object showArrows=true showCarousel=false)jd.gallery.js (line 120)
$type()()bY9Sqf8J...FWA%3D%3D (line 1)
startGallery()test.html (line 259)
$type()(startGallery())bY9Sqf8J...FWA%3D%3D (line 1)
$type()("domready", [])bY9Sqf8J...FWA%3D%3D (line 1)
$type()()bY9Sqf8J...FWA%3D%3D (line 1)
$type()()bY9Sqf8J...FWA%3D%3D (line 1)
$type()(DOMContentLoaded )bY9Sqf8J...FWA%3D%3D (line 1)
[Break on this error] imgPreloader.src = this.galleryData[0].image;

www.terrybarthdesign.com

388 Posts

Terry Reply #4, 18 years, 2 months ago

OK, I changed something. . .

I’ve been making some changes to other pages on my site--updating content, css, etc. etc. Suddenly the slide show has appeared. However the it’s not showing any images, just a moving bar as if its loading. But it doesn’t finish, just continues to show the moving bar. If I click on the bar, it takes me to the first image with prev/next buttons. I can click through them, but the slide show isn’t working.

I’m still getting the js error

www.terrybarthdesign.com

388 Posts

Terry Reply #5, 18 years, 2 months ago

Has anyone seen this? Suggestions?

www.terrybarthdesign.com

4,213 Posts

doze Reply #6, 18 years, 2 months ago

It seems that the slideshow script cannot find any images from the html source.. Is MaxiGallery rendering the image tags to the HTML source ok?

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

388 Posts

Terry Reply #7, 18 years, 2 months ago

Doze, thanks for looking at this.

I’m not entirely sure how the html should look for this, but if take the url from the code below and paste it into mybrowser, the images are displayed. So I think that tells me the images are there and the path is correct.

What’s next?

Terry

<div id="gallery">

<!--
	<div id="myGallery7">
	 
	<div class="imageElement">
	<h3></h3>
	<p></p>
	<a href="/Home-2.html?pic=5" title=" » Click to zoom ->" class="open"></a>
	<img src="/assets/galleries/7/1pic00891_525_385.jpg" class="full" />
	<img src="/assets/galleries/7/tn_1pic00891_525_385.jpg" class="thumbnail" />
	</div>

	<div class="imageElement">
	<h3></h3>
	<p></p>
	<a href="/Home-2.html?pic=6" title=" » Click to zoom ->" class="open"></a>
	<img src="/assets/galleries/7/1dscn1681_300.jpg" class="full" />
	<img src="/assets/galleries/7/tn_1dscn1681_300.jpg" class="thumbnail" />
	</div>

	<div class="imageElement">
	<h3></h3>
	<p></p>
	<a href="/Home-2.html?pic=3" title=" » Click to zoom ->" class="open"></a>
	<img src="/assets/galleries/7/pic00891_525_385.jpg" class="full" />
	<img src="/assets/galleries/7/tn_pic00891_525_385.jpg" class="thumbnail" />
	</div>

 	<div class="imageElement">
	<h3></h3>
	<p></p>
	<a href="/Home-2.html?pic=4" title=" » Click to zoom ->" class="open"></a>
	<img src="/assets/galleries/7/dscn1681_300.jpg" class="full" />
	<img src="/assets/galleries/7/tn_dscn1681_300.jpg" class="thumbnail" />
	</div>

	</div>
-->

<div style="display: block;" class="jdGallery withArrows" id="myGallery7">

<a style="display: block;" title=" » Click to zoom ->" href="http://localhost/Home-2.html?pic=5" class="open"></a>

<div style="margin: 0px; padding: 0px; position: absolute; left: 0px; right: 0px; background-image: url(/assets/galleries/7/1pic00891_525_385.jpg); background-position: center center; visibility: visible; opacity: 1;" class="slideElement"></div>

<div style="margin: 0px; padding: 0px; position: absolute; left: 0px; right: 0px; background-image: url(/assets/galleries/7/1dscn1681_300.jpg); background-position: center center; visibility: hidden; opacity: 0;" class="slideElement"></div>

<div style="margin: 0px; padding: 0px; position: absolute; left: 0px; right: 0px; background-image: url(/assets/galleries/7/pic00891_525_385.jpg); background-position: center center; visibility: hidden; opacity: 0;" class="slideElement"></div>

<div style="margin: 0px; padding: 0px; position: absolute; left: 0px; right: 0px; background-image: url(/assets/galleries/7/dscn1681_300.jpg); background-position: center center; visibility: hidden; opacity: 0;" class="slideElement"></div>

<a class="left"></a><a class="right"></a><div style="display: none;" class="loadingElement"></div><div style="visibility: visible; opacity: 0.7; height: 40px;" class="slideInfoZone"><h2></h2><p></p></div><div style="visibility: visible; opacity: 0.4; top: -115px;" class="carouselContainer"><a title="Pictures" class="carouselBtn">Pictures</a><div class="carousel"><p class="label"></p><div class="carouselWrapper"><div style="width: 530px;" class="carouselInner">

<div style="background-image: url(http://localhost/assets/galleries/7/tn_1pic00891_525_385.jpg); background-position: center center; background-repeat: no-repeat; margin-left: 10px; width: 100px; height: 75px; visibility: visible; opacity: 0.2;" class="thumbnail"></div>

<div style="background-image: url(http://localhost/assets/galleries/7/tn_1dscn1681_300.jpg); background-position: center center; background-repeat: no-repeat; margin-left: 10px; width: 100px; height: 75px; visibility: visible; opacity: 0.2;" class="thumbnail"></div>

<div style="background-image: url(http://localhost/assets/galleries/7/tn_pic00891_525_385.jpg); background-position: center center; background-repeat: no-repeat; margin-left: 10px; width: 100px; height: 75px; visibility: visible; opacity: 0.2;" class="thumbnail"></div>

<div style="background-image: url(http://localhost/assets/galleries/7/tn_dscn1681_300.jpg); background-position: center center; background-repeat: no-repeat; margin-left: 10px; width: 100px; height: 75px; visibility: visible; opacity: 0.2;" class="thumbnail"></div>

</div></div></div></div><div class="loadingElement"></div></div>

</div>

www.terrybarthdesign.com

4,213 Posts

doze Reply #8, 18 years, 2 months ago

Looks ok.. you had added those  tags manually, right?

Bit of a long shot here, but do you have <base href="[(site_url)]"></base> tag in the <head> section of your site template?

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

388 Posts

Terry Reply #9, 18 years, 2 months ago

Doze!

Yes, in my chunk I had been testing some different parameters with the MG call. I thought I had commented out that code but apparently that wasn’t working. When I removed that from the chunk, the gallery started working immediately.

Cool! Thank you so much!

Terry

www.terrybarthdesign.com

4,213 Posts

doze Reply #10, 18 years, 2 months ago

Yep, great.

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