By serving on

Hello all

I would like to figure out how a set of images can be made to display in a specific area on a page without having to reload the page.

Here is a Drupal site using the exact method I would like to learn about:

http://www.sanyo.com.au/products/commercial-display-solutions/plasma/pdp...

When you click on the thumbnail you get the big image above it.

Is this the work of a specific module or is custom programing all the way?

Any wizard to explain this magic? :)

Serving

⋅ Categories: Drupal 5.x, Drupal 6.x

Comments

WorldFallz’s picture

WorldFallz commented

I only took a quick look at the source, but it looks like custom javascript/jquery to me (they also load the jquery ui library, but I don't believe that has a slide show module.

There are a number of modules that create slideshows of one sort or another-- using one of those (or even a jquery plugin) would be easier than writing it yourself.

ppblaauw’s picture

ppblaauw commented

You can have a look at the dynamic display block module which has this functionality.

You can also have a look at the comparison of slideshow/rotator modules

Hope this helps you further.

serving’s picture

serving commented

Thank you guys for taking the time to look into this.

I found the exact jquery plugin that does exactly what is required.

t is called PikaChoose 2.7 http://plugins.jquery.com/node/4336/release

Now I have to figure out how to incorporate it in a products description page with attached images.

Also, there is Galleria. http://plugins.jquery.com/project/galleria
which has a Drupal module http://drupal.org/project/galleria

However, "You attach images to each Galleria node, and when you display the node...." Probably there is a way to include the galleria node inside the product node? The links sent by ppblaauw are a good place to start looking. Thanx ppblaauw.

PikaChoose is obviously the right and better tool for doing that exact thing Sanyo.com.au did for the products details page.

The question is can it be used in drupal without too much hassle?

Any ideas? :)

Serving

WorldFallz’s picture

WorldFallz commented

You can use any javascript and/or jquery you want with drupal. Id start with the documentation: Working with JavaScript and jQuery.

serving’s picture

serving commented

I am not a javascript nor css expet by any stretch but, looking at the page source, it looks that the effect is handled in css not js.

I believe the effect can be replicated in these steps:
- create a cck content type "productdetails"
- workout the image uploads .. how the thumbs are generated or uploaded.
- Tabs module
- Theme where you images should be placed. control presentation in css

Am I missing anything?

Here is an extract from the source:



<div id="tab_keyfeatures" class="product_detail_container">
			<div class="inner">
				<div class="left">
					<div class="image_container" style="margin-left: 4px; margin-top: 52px;">
															<div id="hero-0" style="margin: 0; padding: 0; display: none;">
										<img src="http://www.sanyo.com.au/images/products/CommDisplay/PDP63XR7HB_an.jpg" width="420" alt="Sanyo PDP63XR7HB" />

									</div>
																		<div id="hero-1" style="margin: 0; padding: 0; display: none;">
										<img src="http://www.sanyo.com.au/images/products/CommDisplay/PDP63XR7HB_fr.jpg" width="420" alt="Sanyo PDP63XR7HB" />
									</div>
														</div>
					<div class="thumbnail_container">
															<div id="btn_thumb-0" class="image">
										<div class="onstate"></div>
										<div class="bg">

											<img src="http://www.sanyo.com.au/images/products/CommDisplay/PDP63XR7HB_an_tn.jpg" width="109" height="96" />
										</div>
									</div>
																		<div id="btn_thumb-1" class="image">
										<div class="onstate"></div>
										<div class="bg">
											<img src="http://www.sanyo.com.au/images/products/CommDisplay/PDP63XR7HB_fr_tn.jpg" width="109" height="96" />
										</div>
									</div>

														</div>
				</div>



The css for the above section is in /sites/all/themes/sanyo/styles/global.css?C and it looks like :


.product_detail_container {width:920px; 
		background: url('../images/static/product_bg_tile.gif') repeat; float: left;}
			.product_detail_container .inner {width:920px; 
			background: url('../images/static/product_bg_gradient.jpg') top no-repeat; float: left;} 

				.inner .left {float: left; width: 430px; margin-right: 40px;}
					.inner .left .image_container {width: 420px; } 
					.inner .left .image_nav {width:420px; }
				
				
				.inner .right {float: left; width: 430px; padding-top: 50px;}
					.inner .spec {margin-top: 30px; width:430px;}
					.inner .spec p{ padding: 7px 0px 8px 12px; margin: 0px;}
						.inner .spec strong {font-weight: bold;}
						.inner .blue {width: 100%; background: #f3f7f9;}
						.inner .white {width: 100%; background: #fff;}
						.inner .right .button_container {width: 430px; padding-bottom: 30px; float: left; margin-top: 30px;}
						.button_container .store a{width:153px; height:58px; float: right; background: url('../images/static/store_locator_button.gif') no-repeat;}
						.button_container .enquire a{width:157px; height:58px; float: right; background: url('../images/static/enquire_button.gif') no-repeat;}

				.thumbnail_container {width: 384px; height:146px; margin: 34px auto 0px auto;}
				.thumbnail_container .image {width:113px; background: white; float: left; margin-right:15px;}
				.image .onstate {width: 113px; height:10px; background: url('../images/static/gallery_image_onstate.gif') no-repeat; overflow: hidden;}
				.image .bg {width: 113px; height: 102px; background: url('../images/static/gallery_bg.gif');}


If only it wasn't so much work :P

Serving