SixServe - Free No Ads cPanel Web Hosting: Slideshow code - SixServe - Free No Ads cPanel Web Hosting

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Slideshow code

#1
User is offline   soumikbhat 
Posted 26 January 2012 - 01:57 PM

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 244
  • Joined: 25-December 11
http://www.punteney....eshow-animated/
Once pay a visit to this page, there is a slideshow running by the name - "Slideshow using the default fade transition"

I wanna create a similar slideshow (similar in the sense of the fade transitions) but the Javascript given actually refers to those images which the authour might have stored in some files like gallery etc (as is evident fro the code - lol, I don'y know much of JSS).

Now suppose I've two images a.jpg & b.jpg and want to design a similar slideshow....Can anyone please give me the complete code for the same?
0

#2
User is offline   FlightPilot 
Posted 26 January 2012 - 02:00 PM

  • SixServe Team (Support)
  • Group: Staff
  • Posts: 2,554
  • Joined: 28-December 11
  • LocationSomewhere in the Sky.
Soumikbhat , you would want to try out jquery , its the latest trend of javascript and provides amazing plugins and codes. (Jquery.com)
FlightPilot
Si6 Staff
Personal Message (PM) Staff/Admin is not the right way to seek help. Just post it in the Forum and our crew will take care of it.

Posted Image Go Unlimited ! Premium Hosting with Unlimited domains and 99.9% up-time for Just USD $4.99. Grab it!
0

#3
User is offline   soumikbhat 
Posted 26 January 2012 - 02:10 PM

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 244
  • Joined: 25-December 11

View PostFlightPilot, on 26 January 2012 - 02:00 PM, said:

Soumikbhat , you would want to try out jquery , its the latest trend of javascript and provides amazing plugins and codes. (Jquery.com)


I understand - but currently I'm more eager for the code than the exact knowledge :P
0

#4
User is offline   FlightPilot 
Posted 26 January 2012 - 02:17 PM

  • SixServe Team (Support)
  • Group: Staff
  • Posts: 2,554
  • Joined: 28-December 11
  • LocationSomewhere in the Sky.
So you want the code to create this slide show as homebox slide show or just a normal fade in transition slide show for any particular page ?
FlightPilot
Si6 Staff
Personal Message (PM) Staff/Admin is not the right way to seek help. Just post it in the Forum and our crew will take care of it.

Posted Image Go Unlimited ! Premium Hosting with Unlimited domains and 99.9% up-time for Just USD $4.99. Grab it!
0

#5
User is offline   soumikbhat 
Posted 26 January 2012 - 02:24 PM

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 244
  • Joined: 25-December 11

View PostFlightPilot, on 26 January 2012 - 02:17 PM, said:

So you want the code to create this slide show as homebox slide show or just a normal fade in transition slide show for any particular page ?

just a normal fade in transition slide show for any particular page ....I want the complete code and thus I've provided the images name as say a.jpg, b.jpg etc
0

#6
User is offline   IwingMusic 
Posted 26 January 2012 - 04:52 PM

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 104
  • Joined: 30-December 11
  • LocationJakarta, Indonesia
you mean such this soumikbhat?
Just hit me
0

#7
User is offline   IwingMusic 
Posted 26 January 2012 - 05:18 PM

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 104
  • Joined: 30-December 11
  • LocationJakarta, Indonesia
okay the server is not responding. let's say you meant so :lol:

here what you have to do regarding punteney's tutorial.

download the javascript files which i retrieved from punteney and place the js folder inside zip file into same folder as your page after extracting.

put these javascript and css codes between <head> tag of your page
<script src="js/yui-min.js"></script>
<script type="text/javascript">
	YUI({
    	modules: {
        	'gallery-slideshow-base': {
            	fullpath: 'js/gallery-slideshow-base-min.js',
            	requires: ['node', 'event', 'widget']
        	},
        	'gallery-slideshow-animated': {
            	fullpath: 'js/gallery-slideshow-animated-min.js',
            	requires: ['anim', 'gallery-slideshow-base']
        	}
    	}
	}).use("gallery-slideshow-animated", function(Y) {
    	Y.SlideshowAnimated.auto();
	});
</script>
<style type="text/css">
.slideshow {position: relative; height: 250px; width: 393px; overflow: hidden;}
.slide { display: none; position: absolute;}
.slide.current { display: block; }
</style>


and put this element between <body> tag of the page
<div class="slideshow">
	<img src="your-image-a.jpg" class="slide current">
	<img src="your-image-b.jpg" class="slide">
	<img src="your-image-c.jpg" class="slide">
	<img src="your-image-d.jpg" class="slide">
	<img src="your-image-e.jpg" class="slide">
</div>


just customize the your-image-... name as to location of your images.
Just hit me
0

#8
User is offline   soumikbhat 
Posted 27 January 2012 - 04:57 AM

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 244
  • Joined: 25-December 11

View PostIwingMusic, on 26 January 2012 - 05:18 PM, said:

okay the server is not responding. let's say you meant so :lol:

here what you have to do regarding punteney's tutorial.

download the javascript files which i retrieved from punteney and place the js folder inside zip file into same folder as your page after extracting.

put these javascript and css codes between <head> tag of your page
<script src="js/yui-min.js"></script>
<script type="text/javascript">
	YUI({
    	modules: {
        	'gallery-slideshow-base': {
            	fullpath: 'js/gallery-slideshow-base-min.js',
            	requires: ['node', 'event', 'widget']
        	},
        	'gallery-slideshow-animated': {
            	fullpath: 'js/gallery-slideshow-animated-min.js',
            	requires: ['anim', 'gallery-slideshow-base']
        	}
    	}
	}).use("gallery-slideshow-animated", function(Y) {
    	Y.SlideshowAnimated.auto();
	});
</script>
<style type="text/css">
.slideshow {position: relative; height: 250px; width: 393px; overflow: hidden;}
.slide { display: none; position: absolute;}
.slide.current { display: block; }
</style>


and put this element between <body> tag of the page
<div class="slideshow">
	<img src="your-image-a.jpg" class="slide current">
	<img src="your-image-b.jpg" class="slide">
	<img src="your-image-c.jpg" class="slide">
	<img src="your-image-d.jpg" class="slide">
	<img src="your-image-e.jpg" class="slide">
</div>


just customize the your-image-... name as to location of your images.


Thanks a ton - I'll try this out :)
0

#9
User is offline   soumikbhat 
Posted 27 January 2012 - 05:05 AM

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 244
  • Joined: 25-December 11
Yippiee.....done - thanks
0

#10
User is offline   IwingMusic 
Posted 27 January 2012 - 07:08 AM

  • Advanced Member
  • PipPipPip
  • Group: Members
  • Posts: 104
  • Joined: 30-December 11
  • LocationJakarta, Indonesia
you are welcome
Just hit me
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users

Squidix Web Hosting