Results 1 to 7 of 7

Thread: Randomize Content Slider by clicking on Image

  1. #1
    Join Date
    May 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Randomize Content Slider by clicking on Image

    1) Script Title:Featured Content Slider

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

    3) Describe problem:
    Is it possible to have random contents by clicking on same image each time... I want content to change randomly each time when an image above slider is clicked each time?

    Please Help me if possible...

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Yes. For your init do things a little differently. Instead of:

    Code:
    featuredcontentslider.init({
    	id: "slider1",  //id of main slider DIV
    	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
    	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    	enablefade: [true, 0.2],  //[true/false, fadedegree]
    	autorotate: [true, 3000],  //[true/false, pausetime]
    	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
    		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    	}
    })
    Do it like so:

    Code:
    var myslider = {
    	id: "slider1",  //id of main slider DIV
    	contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    	toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
    	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    	enablefade: [true, 0.2],  //[true/false, fadedegree]
    	autorotate: [true, 3000],  //[true/false, pausetime]
    	onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
    		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    	}
    };
    featuredcontentslider.init(myslider);
    Then you can have an image:

    Code:
    <img src="whatever.gif" alt="" onclick="myslider.contentdivs.sort(function(){return 0.5 - Math.random();});">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Dear John
    Please help me to implement this... as the image in the page is not clickable according to this code...

    Can u please explain?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You can click on anything. Whether that accomplishing anything or not depends upon the code. The code given here in my last post (if you have followed my suggestions) will randomize the Slider onclick of the image. But if you mean the finger pointing cursor, you can give it that as well. To give that cursor to the image we've been talking about:

    Code:
    <img style="cursor: pointer;" src="whatever.gif" alt="" onclick="myslider.contentdivs.sort(function(){return 0.5 - Math.random();});">
    If I've misunderstood, and/or there are other problems, please be more specific, and:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    In the Code given by you i have set autorotate: [false, 3000](because i dont want content to slide automatically) , & toc: "markup",


    But as you can see in link given below that on clicking the image, content is not changing.

    http://www.jaisainath.com/slide.htm (Link where i created dummy page with this script)
    PLease help me out JOhn, i am really thankful for your kind support.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I see, the code I gave you simply shuffles the contents. It doesn't make the contents change. I thought you were changing the contents in some other fashion, like auto rotate.

    We can make the the image also change the slide to one in the now shuffled order:

    Code:
    onclick="myslider.contentdivs.sort(function(){return 0.5 - Math.random();});featuredcontentslider.turnpage(myslider, 'next');"
    But random means random, so the next slide may actually be the same slide, and, doing it like that leaves no good way to weed out a duplicate change.

    Put this (highlighted) in the head of your page, right after the main script, as shown:

    Code:
    <script type="text/javascript" src="contentslider.js">
    
    /***********************************************
    * Featured Content Slider- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    <script type="text/javascript">
    featuredcontentslider.turnrandom = function(setting){
    	var newnum = setting.currentpage;
    	while(newnum == setting.currentpage){
    		newnum = Math.ceil(Math.random() * setting.contentdivs.length);
    	}
    	this.turnpage(setting, newnum);
    };
    </script>
    Now, make the image:

    Code:
    <img style="cursor: pointer;" src="picture1.jpg" alt="" onclick="featuredcontentslider.turnrandom(myslider);" />
    You can even add in a title attribute to give the users a clue when they hover the image:

    Code:
    <img title="Random Slide" style="cursor: pointer;" src="picture1.jpg" alt="" onclick="featuredcontentslider.turnrandom(myslider);" />
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    May 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Dear John..

    Thanks a lot.... I am really-2 very happy n glad that u helped me a lot....I really appreciate your effort.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •