PHP - Help in Drupal Module

Asked By rajkumar rajkumar on 03-Sep-11 02:52 AM

Hi Friends,

Can anyone help me on this , Now i am working on a site on drupal. My client asked a slideshow which is like to this site . http://ecommerceparis.com/2011/ .

If you see that site it is not the images just slide without any sense. If you see the slidshow there are some categories in the middle of the slide.i.e,, (en bref,550 exposants,350 conférences,awards......) when we click on the 350 conférences then we have to display only confrence images , and when we click on award we have to slide only awards images.same like that for all categories.

As it is high priority work for me , can anyone please help me on this.

Thanks in advance,
Rajkumar

Jitendra Faye replied to rajkumar rajkumar on 03-Sep-11 03:23 AM

For Jquery slider you can use slideViewerPro 1.0.

slideViewerPro is a fully customizable jQuery image gallery engine wich allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.

slideViewerPro is the direct descendant of the popular jQuery slideViewer plugin.

Each gallery generates a user-defined number of thumbnails wich can slide automatically (see Settings and Dependencies section); as with slideViewer, everthing is generated by writing just few lines of HTML such as an unordered list of images.

Follow this link-

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/

Hope this will help you.

rajkumar rajkumar replied to Jitendra Faye on 03-Sep-11 03:27 AM

image slideshow is ok but i want like category wise like previuosly i explained like "awards" and i want in Drupal .

Radhika roy replied to rajkumar rajkumar on 03-Sep-11 03:30 AM

jsCarousel v2.0 is a jquery slider plugin that slides contents in multi direction. Now it supports both horizontal and vertical orientation, see the screen shot below. jsCarousel v2.0 slider can be used as a feature content slider as well. You can put any kind of contents you want whether images, text, videos, news etc. it's up to you. One interesting thing about jsCarousel v2.0 slider is that you can makesimple image gallery with thumbnail support by using it. jsCarousel v2.0 slider plugin gives you the source of image via callback function, when you click on some image within slider. See Using jsCarousel v2.0 Slider section below to get an idea about using the callback function.

jsCarousel v2.0 Parameters

orientation: To use horizontal slider set orientation value to 'h' and for vertical slider set orientation value to 'v', default is 'h'.
masked: Boolen value, set masked to true if you want overlay effect, default is true.
scrollspeed: Sliding speed in milliseconds for slider contents, default is 500.
delay: The delay in milliseconds between each slide shift, default is 5000.
itemstodisplay: Maximum no of visible items, default is 5.
autoscroll: If true slider contents will automatically shuffle, default is false.
circular: if true slider will start over after last item, if false slider will stop at last item if moving forward and at first item if moving backward. Circular property is only meaningful with autoscroll = false, as autoscroll is already circular. default value is true.
onthumbnailclick: Callback function to be called on each image click, jsCarousel slider will automatically find images and bind the callback function if provided.

Using jsCarousel Slider

In your HTML file add the following in the head section.

Add a reference to latest jQuery script
Add a reference to jsCarousel-v2.0.0.js file
Add a reference to jsCarousel-v2.0.0.css file

Create a block element (div) within the body of you HTML file, assign it some id e.g 'jsCarousel'. Next you need to put
some block elements (div) within above created element. All the first level(direct children) block elements will be used as slider items. You are free to add whatever elements you like within these first level child elements.
See the "divs" in the complete source code of the sample below. I've put single image and a span element within each first level elements, you can put some more interesting contents. e.g. News with images

Now add the following code to your HTML file’s head section.

EXAMPLE:

<script type="text/javascript">

$(document).ready(function() {

$('#jsCarousel').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true });

});

</script>

Here is the complete code for the example above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>jQuery Thumbnail/Content Slider: jsCarouselV2.0.0</title>

<script src="jquery-1.4.4.min.js" type="text/javascript"></script>

<script src="jsCarousel-2.0.0.js" type="text/javascript"></script>

<link href="jsCarousel-2.0.0.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

$(document).ready(function() {

$('#carouselv').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: false, itemstodisplay: 3, orientation: 'v' });

$('#carouselh').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: false, masked: false, itemstodisplay: 5, orientation: 'h' });

$('#carouselhAuto').jsCarousel({ onthumbnailclick: function(src) { alert(src); }, autoscroll: true, masked: true, itemstodisplay: 5, orientation: 'h' });

});

</script>

<style type="text/css">

body

{

background-color: #2F2F2F;

padding-top: 40px;

}

#demo-wrapper

{

margin: 0;

padding: 0;

width: 100%;

height: 100%;

padding: 40px 20px 0px 20px;

}

#demo-left

{

width: 15%;

float: left;

}

#demo-right

{

width: 85%;

float: left;

}

#hWrapperAuto

{

margin-top: 20px;

}

#demo-tabs

{

width: 100%;

height: 50px;

color: White;

margin: 0;

padding: 0;

}

#demo-tabs div.item

{

height: 35px;

float: left;

background-color: #2F2F2F;

border: solid 1px gray;

border-bottom: none;

padding: 0;

margin: 0;

margin-left: 10px;

text-align: center;

padding: 10px 4px 4px 4px;

font-weight: bold;

}

#contents

{

width: 100%;

margin: 0;

padding: 0;

color: White;

font: arial;

font-size: 11pt;

}

#demo-tabs div.item.active-tab

{

background-color: Black;

}

#demo-tabs div.item.active-tabc

{

background-color: Black;

}

#v1, #v2

{

margin: 20px;

}

.visible

{

display: block;

}

.hidden

{

display: none;

}

#oldWrapper

{

margin-left: 100px;

}

#contents a

{

color: yellow;

}

#contents a:hover

{

text-decoration: none;

color: Gray;

}

.heading

{

font-size: 20pt;

font-weight: bold;

}

</style>

</head>

<body>

<div id="contents">

<div id="v2">

<span class="heading">jsCarousel V 2.0.0</span> <a href="http://www.egrappler.com/jquery-contentthumbnail-slder-v2-0-jscarousel-v2-0">

Back To Post</a>

<p>

This is version 2.0.0 of jsCarousel plugin, it supports both horizontal and vertical

sliders. You can also control the mask effect directly from the plugin initializer

function instead of modifying the CSS code in jsCarousel v2.0.0. To see demonstration

for jsCarousel v 1.0.0 <a href="http://www.egrappler.com/contents/jsCarousel/Demo/index.htm">

click here.</a></p>

<div id="demo-wrapper">

<div id="demo-left">

<div id="vWrapper">

<div id="carouselv">

<div>

<img alt="" src="images/img_1.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_2.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_3.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_4.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_5.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_6.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_7.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_8.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_9.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_10.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_11.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_12.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_13.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_14.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_15.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_16.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

</div>

<div id="demo-right">

<div id="hWrapper">

<div id="carouselh">

<div>

<img alt="" src="images/img_1.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_2.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_3.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_4.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_5.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_6.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_7.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_8.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_9.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_10.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_11.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_12.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_13.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_14.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_15.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_16.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

</div>

<div id="hWrapperAuto">

<div id="carouselhAuto">

<div>

<img alt="" src="images/img_1.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_2.jpg" /><br />

<span class="thumbnail-text">Image Text</span></div>

<div>

<img alt="" src="images/img_3.jpg" /><br />

<span class="thumbnail-text"

...

[Message clipped] View entire message