• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 238
  • Last Modified:

Need suggestion on what kind of horizontal scroller to use for website

If you take a look at the bottom of this page:

http://www.colorshoutconcepts.com/

.. you'll see that I have a small logo image (with a gray arrow on each side of it) ... as well as a "GO" button.

What I'd like to do is have it so that when you click on either of the gray arrows, .. a different logo image slides into place.  You can then either click on the logo image -- or click on the GO button -- and it will take you to a specific page URL on the same site.

If the "sliding into place" effect is too complicated, .. then I'm open to just instead having the logo image quickly change out to a different image.  It's just important that whatever solution I implement can be configured to work with however many logo images are necessary.

How would I accomplish something like this?  Please advise.

Thanks,
- Yvan
 
0
egoselfaxis
Asked:
egoselfaxis
2 Solutions
 
BardobraveCommented:
What you explain seems like an image carousel, check this site:

http://www.vivalogo.com/vl-resources/javascript-slideshows-sliders-carousels.htm
0
 
rajapandian_81Commented:
Hi,

Store all image names in Array and load one by one after button click. Try below code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

<table id="MyTable">    
    <tr>
        <td>
            <button id="btnPrevious" onclick="ChangeImage(this.id);" />
        </td>
        <td>    
            <img id="Image1" src="Coffee Bean.bmp" alt="" onclick="redirectPage();" /> 
        </td>
        <td>                        
            <button id="btnNext" onclick="ChangeImage(this.id);" />
        </td>
        <td>
            <button id="btnGo" onclick="redirectPage();" />
        </td>
    </tr>
</table>
<script language="javascript" type="text/javascript" >
    var myImages = new Array("Coffee Bean.bmp", "Blue Lace 16.bmp", "FeatherTexture.bmp", "Gone Fishing.bmp");
    var totalImages = 4;
    var imageNo = 0;

    function ChangeImage(btnId) {       
        
        if (btnId == "btnPrevious")
            imageNo -= 1;
        else
            imageNo += 1;

        if (imageNo == totalImages)
            imageNo = 0;
        else if (imageNo < 0)
            imageNo = totalImages - 1;
            
        document.getElementById("Image1").src = myImages[imageNo];
    }

    function redirectPage() {

        var imageSrc = document.getElementById("Image1").src;
        alert("Redirect to URL based on src. SRC: " + imageSrc);   
    }
</script>
</body>
</html>

Open in new window

0
 
egoselfaxisAuthor Commented:
This seems like it will work great -- only how do I specify a different url to redirect to based on which logo image is being displayed?

- yg
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
rajapandian_81Commented:
For images, you can give page name + .bmp. In redirectPage function you can replace bmp with html and redirect.

Hope you got!!!
0
 
egoselfaxisAuthor Commented:
Hmm .. I'm not quite sure I follow.  Can you show me an example?
0
 
nap0leonCommented:
In this solution you would have your target URL be the same name/location as the image and use a "replace" function to replace "jpg", "bmp", "gif", etc with "html", "asp", "aspx","php", etc.

I like the basics of the function but have customized it so that it uses a two dimensional array for myImages.  The first dimension is the location of the image, the second dimension is the URL that the user should go to when they click the "Go" button.

Here is the JS for a carousel with 5 images:
	var totalImages = 5;
	var imageNo = 0;  //which image do you want to show first?

	var myImages = new Array(totalImages);
	for (i=0; i<totalImages; i++){
		myImages[i] = new Array(2)
	}

	myImages[0][1] = "images/staging/photo-belem.jpg";
	myImages[0][2] = "belem/url/here.asp";

	myImages[1][1] = "images/staging/photo-construction.jpg";
	myImages[1][2] = "construction/url/here.asp";

	myImages[2][1] = "images/staging/photo-field-of-flowers.jpg";
	myImages[2][2] = "field-of-flowers/url/here.asp";

	myImages[3][1] = "images/staging/photo-mountain-sunset.jpg";
	myImages[3][2] = "mountain-sunset/url/here.asp"

	myImages[4][1] = "images/staging/photo-rotors.jpg";
	myImages[4][2] = "rotors/url/here.asp";


    function ChangeImage(btnId) {
        if (btnId == "btnPrevious")
            imageNo -= 1;
        else
            imageNo += 1;

        if (imageNo == totalImages)
            imageNo = 0;
        else if (imageNo < 0)
            imageNo = totalImages - 1;
        document.getElementById("Image1").src = myImages[imageNo][1];
    }

    function redirectPage() {
        var gotoURL = myImages[imageNo][2];
        alert("Redirect to URL " + gotoURL);   
    }

Open in new window


I also put labels on the buttons and moved them below the images because I like them better that way, but that's just me.
		<table id="MyTable">    
		    <tr>
		        <td><img id="Image1" src="images/staging/photo-belem.jpg" alt="" onclick="redirectPage();"/></td>
		    </tr>
		    <tr>
		        <td align="center">
			<button id="btnPrevious" onclick="ChangeImage(this.id);">Previous</Button> 
			<button id="btnNext" onclick="ChangeImage(this.id);" />Next</Button> 
			<button id="btnGo" onclick="redirectPage();">Go</button>
			</td>
		    </tr>
		</table>

Open in new window

0
 
egoselfaxisAuthor Commented:
Thanks guys!

- yg
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now