Results 1 to 6 of 6

Thread: Ultimate Fade In Slideshow - Moving status div

  1. #1
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade In Slideshow - Moving status div

    1) Script Title: Ultimate Fade In Slideshow

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

    3) Describe problem:

    I am simply trying to re-locate the status div.

    I want to display the image counter within the status div, but I need it to be away from the navigation controls. I need to put the image counter in the right hand column that says "Status needs to go here"

    Please excuse colored borders, they are only visible for responsive testing.

    Dev URL: http://re-brand.us/jp/graphic.html


    Any help is appreciated!

    Thank you.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,188 Times in 3,152 Posts
    Blog Entries
    12

    Default

    .

    Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.


    That said, add the highlighted as shown:

    Code:
    	<script type="text/javascript">
    
    	var mygallery2=new fadeSlideShow({
    		wrapperid: "slider", //ID of blank DIV on page to house Slideshow
    		dimensions: [814, 539], //width/height of gallery in pixels. Should reflect dimensions of largest image
    		imagearray: [
    			["images/home-1.jpg"],
    			["images/graphic-1.jpg"],
    			["images/home-1.jpg"],
    			["images/graphic-1.jpg"] //<--no trailing comma after very last image element!
    		],
    		displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
    		persist: false, //remember last viewed slide and recall within same session?
    		fadeduration: 500, //transition duration (milliseconds)
    		descreveal: "always",
    		togglerid: "controls",
    		oninit: function(){
    			jQuery('.status').eq(1).replaceWith(jQuery('.status').eq(0));
    		}
    	})
    	
    	</script>
    You will also want to remove (red):

    Code:
    	<!-- Start Right Column -->
    	<div class="right-column">
    		<div id="counter"> [ <span class="status"></span>Status needs to go here ]
            	</div>
    	</div>
    	<!-- End Right Column -->
    and (again, only the red):

    Code:
    <div id="controls"><a class="prev">_PREVIOUS</a> [ <span class="status"></span> ] <a class="next">_NEXT</a></div>
    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    s14guy04 (10-11-2013)

  4. #3
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    My apologies! The credit has been put back into the head.

    Thank you thank you so much for this!! I was dying trying to figure out how to implement this.

    One more question however:

    Would it be possible to change the image description div to the one with the yellow border?
    Last edited by jscheuer1; 10-11-2013 at 04:29 PM. Reason: unnecessary quoting

  5. #4
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Nevermind!

    I found exactly what I was looking for in the supplemental page 2 of the Ultimate Fade In Slideshow here:

    http://www.dynamicdrive.com/dynamici...suppliment.htm

    Thank you so much for your hard work on these sliders, I love them!

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,188 Times in 3,152 Posts
    Blog Entries
    12

    Default

    I see you're messing around with this. When you had:

    Code:
    		onslide:function(curimage, index){
    		  var imagearray=this.setting.imagearray
    		  jQuery('.content').html(imagearray[index][3])
    		}
    That's close. But apparently for images with no descriptions that leaves the last description, at least in some browsers. You might want:

    Code:
    		onslide:function(curimage, index){
    		  var imagearray=this.setting.imagearray, desc = imagearray[index][3];
    		  if(desc){jQuery('.content').html(desc);} else {jQuery('.content').empty();}
    		}
    - John
    ________________________

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

  7. #6
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That worked great! Thanks John!
    Last edited by s14guy04; 10-11-2013 at 06:23 PM.

Similar Threads

  1. Ultimate Fade-in Slideshow -- Fade Duration and Pause
    By ellenjones6 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-21-2014, 04:18 PM
  2. Problem moving Ultimate Fade-in slideshow on page
    By sonofray in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-15-2011, 02:51 PM
  3. Replies: 3
    Last Post: 07-12-2010, 04:04 PM
  4. Change fade time in Ultimate Fade In slideshow
    By Zaphodz in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-17-2006, 12:08 PM
  5. Ultimate Fade In Slideshow - Images moving on resize
    By Techy in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-04-2006, 11:35 AM

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
  •