How JustAnswer Works:

  • Ask an Expert
    Experts are full of valuable knowledge and are ready to help with any question. Credentials confirmed by a Fortune 500 verification firm.
  • Get a Professional Answer
    Via email, text message, or notification as you wait on our site.
    Ask follow up questions if you need to.
  • 100% Satisfaction Guarantee
    Rate the answer you receive.

Ask TheDoctor Your Own Question

TheDoctor
TheDoctor, Professional w/Adv. Degree
Category: Homework
Satisfied Customers: 1757
Experience:  M.S. in Internet Information Systems
59032869
Type Your Homework Question Here...
TheDoctor is online now
A new question is answered every 9 seconds

I need to finish some code. Im having problems with two things.

Resolved Question:

I need to finish some code. I'm having problems with two things. The first thing is that whenever I press the "#prev" button, which is a background image of a " ", just fine. I just need it to go the opposite way when ever I press the "#prev" button.


The second problem I is that when the carousel gets to the last image it should go directly to the first image. In my carousel whenever the last image is is met, it animates backwards to the first image. I just want it to go directly to the first image after the last image.

Something like this
http://jquery.malsup.com/cycle/pager11.html


Here is my code

HTML



CSS


#wrapper{width:1186px; height:600px;}
#myslide {width:1185px;overflow:hidden;position: relative;height:600px; margin-bottom:20px;}
#myslide .cover {width:3440px;position: absolute;height:600x;}
#myslide .mystuff {width:1185px;float:left;}
#button{ position: absolute;top: 44px;left: 9px; cursor:pointer;}
#button a {color: blue;font-size: 10px;}
.button1,.button2,.button3 {padding:7px 4px;display:block;float:left;}
#button a.active { color:white;padding:2px 4px;display:block;float:left;outline:none;}
.clear { clear: both; }
#prev{background-image:url(somebackground-image); background-repeat: no-repeat; height:61px; width:50px; display:inline-block; position: relative;z-index: 2; top: -282px; left: -669px;}
#next{background-image:url(somebackground-image); background-repeat: no-repeat; height:64px; width:50px; display:inline-block; position: relative; right: -506px;
top: -282px}


Javascript



var slideInterval = null;

$(document).ready(function() {
$('#button a, #next, #prev').click(function() {
//Clear slide interval to allow overriding of auto slide
if (slideInterval !== null) clearInterval(slideInterval);

var integer = $(this).attr('rel');
DoSlide(integer);
});

});



function DoSlide(integer) {
integer = integer || parseInt($('.active').attr('rel')) + 1;


// Reset auto slide
if (integer == 4) integer = 1;

$('#myslide .cover').animate({
left: -1175 * (parseInt(integer) - 1)
});


$('.active').removeClass('active');
$('a[rel="' + integer + '"]').addClass('active');
}





$(document).ready(function() {



$(".menuitem-at-home ul li").css("width", "300px")

});




If all else fails you can write your own code.
Submitted: 3 years ago.
Category: Homework
Expert:  TheDoctor replied 3 years ago.
Hello and thank you for your question. It would be my pleasure to assist you with this.

Please zip up your site files (including any images/css/javascript files required) and upload the zip folder to http://ge.tt

Once uploaded, you will be given a link on the right. Click on the 'Copy Link' option and then paste it here.

Thank you
Customer: replied 3 years ago.
okay, let me just get the images. It will take 10 mins the most
Expert:  TheDoctor replied 3 years ago.
Thank you. I await your reply. Please remember to post think download link into this thread. Otherwise, I cannot retrieve your files.
Customer: replied 3 years ago.
graphicgraphic You can make up the images for the carousel anything you want from any random site. If you are having trouble with my code you can always create your own.
Expert:  TheDoctor replied 3 years ago.
I still do not have your code. You have not sent it to me. When you upload it to ge.tt, you have to copy the download link and then paste it into this thread. That is a third-party file sharing site. Until you post the download link here, I cannot retrieve your files.
Customer: replied 3 years ago.
ok, now I understand. Sorry about that.

Here is the link

http://www.mediafire.com/download/cr1g5k4i57qf57f/Carousel_Files.zip

sorry I forgot to add the link to the jquery libary. Just add this on top of my code

<script src="DANGEROUS URL REMOVED"></script>
Expert:  TheDoctor replied 3 years ago.
Thank you. I will contact you once this is ready.
Customer: replied 3 years ago.
You must have to use the web developer tool to bring the < arrow on to the image.

for the #prev you will have to change the left demsion to "left: -569px;" to see it on the image.
Expert:  TheDoctor replied 3 years ago.
Hello again,

Is this for a course? Is that the reason why you are not simply using a standard carousel? It's fine if that is the case. Your code needs a lot of work in order to have it function the way you have requested.

So you are required to write the carousel by hand?
Customer: replied 3 years ago.
yes, it for a masters course. you can write a totally different one that is simpler if that is the case. But I can't use a plug in
Expert:  TheDoctor replied 3 years ago.
Thank you. I will contact you once it is ready.
Customer: replied 3 years ago.
And it doesn't have to necessarily animate left it can have a fade in and fade out effect from image to image
Expert:  TheDoctor replied 3 years ago.

Hello again!

Please download the file here:

http://wikisend.com/download/960960/index.zip

It's only your index file. No point in sending you all your other files along with it.

I changed it to a fade out/in. The code is pretty simple and I have commented it. I didn't pay any attention really to your CSS. I'll let you realign things as needed. The only thing I changed was I made button1, button2, button3 be just button without any number, as t works better that way.

Let me know if you have any questions. I'm here to help!

Please remember to rate my answer. Thank you so much and have a wonderful day!

Customer: replied 3 years ago.
This is great and it is just what I was looking for just one question, how do I make the animation alittle smoother. The image seems to disappear when I go to the next image. How do I, or you, make it so that the transition to next image is smooth. Besides that the code is exactly what I was looking for.
Expert:  TheDoctor replied 3 years ago.
I'll see if I can get it a little smoother for you.
Expert:  TheDoctor replied 3 years ago.
THIS ANSWER IS LOCKED!

You need to spend $3 to view this post. Add Funds to your account and buy credits.
TheDoctor and 3 other Homework Specialists are ready to help you
Customer: replied 3 years ago.
Thank you this is exactly what I wanted!!!!
Customer: replied 3 years ago.
I will accept now!
Expert:  TheDoctor replied 3 years ago.
You are so very welcome! I am happy that I was able to help you.

Have a wonderful night.