Page 2 of 2 FirstFirst 12
Results 11 to 12 of 12

Thread: Featured Content Slider first image flicking out not fading ( all browsers ).

  1. #11
    Join Date
    Aug 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Wow. Thanks!

    I'm sort of cleaning up someone else's work so I just want to be clear. If I copy and paste the new scripting into the old template making sure the refs to the java and image files are correct (based off your sample page), I should be good to go, right? The previous guy set this up on CMS Made Simple. Thanks again.

  2. #12
    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

    No, or I'm not sure what you mean. I'll explain what to do.

    The demo I set up uses my copy of fadeslideshow.js and my copy of the loading.gif image as configured here:

    Code:
     . . . ion a:hover, .pagination a.selected{
    color: #000;
    background-color: #FEE496;
    }
    #slider1, #slider1 .gallerylayer img {
    	width: 720px;
    	height: 331px;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="/uploads/NCleanBlue/js/accord_menu.js"></script>
    <script src="/uploads/NCleanBlue/js/jquery.hover_caption.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://home.comcast.net/~jscheuer1/side/inmotion/js/fadeslideshow.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">
    var $ = jQuery;
    fadeSlideShow_descpanel.controls[2][0] = 'http://home.comcast.net/~jscheuer1/side/inmotion/loading.gif';
    </script>
      </head>  <body>
        <div id="ncleanblue">
          <div id="pagewrapper" class="core-wr . . .
    You should grab your own copies (right click and 'Save As'):

    http://home.comcast.net/~jscheuer1/s...deslideshow.js
    http://home.comcast.net/~jscheuer1/s...on/loading.gif

    Put them on the odd-ny.com server and point to them there in the code above.

    I also added style which can be seen in the above snippet:

    Code:
    #slider1, #slider1 .gallerylayer img {
    	width: 720px;
    	height: 331px;
    }
    That's required, don't miss it.

    You can and should keep:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    It should replace:

    Code:
    <script type="text/javascript" src="/uploads/NCleanBlue/js/jquery.js"></script>
    from the old page.

    The scrpt credit in the above should be changed from:

    Code:
    /***********************************************
    * 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
    ***********************************************/
    to:

    Code:
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (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
    ***********************************************/
    And of course the script near the end of my demo must be added where it is:

    Code:
    <script type="text/javascript">
    var mygallery=new fadeSlideShow({
    	wrapperid: "slider1", //ID of blank DIV on page to house Slideshow
    	dimensions: [720, 331], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: (function(){
    		var imagearray = [], $t, $a;
    		$('#slider1 .contentdiv').each(function(){
    			$t = $(this), $a = $t.find('a');
    			imagearray.push([$t.find('img').attr('src'), $a.size()? $a.attr('href') : '', $a.size()? $a.attr('target') || '' : '']);
    		});
    		return imagearray;
    	})(),
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    
    </script>
    While the commented script below it can be removed:

    Code:
    <!-- <script type="text/javascript">
    
    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.1],  //[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)
    	}
    })
    
    </script> -->
    That should be it. Let me know if you have any problems.

    Oh and once you get it set up, let me know because I should take down the demo. You don't want it showing up in search engine results.
    - John
    ________________________

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

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
  •