Javascript controller

Asked

Viewed 181 times

-1

I wanted to associate each session of the images to a link, same as the "Gshow" site, or I click on the "first image" link to go to the first session of images, or it changes by itself and is selected the session that is. How to do this?

<head>
    <meta charset="iso-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A free portfolio item template for Bootstrap 3 perfect for showcasing a single project. All Start Bootstrap templates are free to download and open source.">

    <title>Portfolio Item - Free Bootstrap Portfolio Template - Start Bootstrap</title>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="css/responsiveslides.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/responsiveslides.min.js"></script>

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .imagem-banner {
            height:150px;
            margin-top: 10px;
        }

        .imagem-banner-destaque {
            height:310px;
            margin-top: 10px;
        }


    </style>

    <script>
        // You can also use "$(window).load(function() {"
        $(function () {

            // Slideshow 1
            $("#slider1").responsiveSlides({
                speed: 700,
            });
        });
    </script>        

</head>

<body>

    <div class="link-slider">
        <ul>
            <li><a href="#link_one">Primeira imagem</a></li>
            <li><a href="#link_two">Segunda imagem</a></li>
        </ul>
    </div>

    <ul id="slider1">
        <li>
            <div class ="container" id="link_one">
                <div class="row">
                    <div class="col-xs-8">
                        <img src="1.jpg" width="100%" class="imagem-banner-destaque" />
                    </div>
                    <div class="col-xs-4">
                        <div class="row">
                            <div class="col-xs-12">
                                <img src="1.jpg" width="100%" class="imagem-banner" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <img src="1.jpg" width="100%" class="imagem-banner" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-4">
                        <img src="1.jpg" width="100%" class="imagem-banner" />
                    </div>
                    <div class="col-xs-4">
                        <img src="1.jpg" width="100%" class="imagem-banner" />
                    </div>
                    <div class="col-xs-4">
                        <img src="1.jpg" width="100%" class="imagem-banner" />
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="container" id="link_two">
                <div class="row">
                    <div class="col-xs-8">
                        <img src="2.jpg" width="100%" class="imagem-banner-destaque" />
                    </div>
                    <div class="col-xs-4">
                        <div class="row">
                            <div class="col-xs-12">
                                <img src="2.jpg" width="100%" class="imagem-banner" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <img src="2.jpg" width="100%" class="imagem-banner" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-4">
                        <img src="2.jpg" width="100%" class="imagem-banner" />
                    </div>
                    <div class="col-xs-4">
                        <img src="2.jpg" width="100%" class="imagem-banner" />
                    </div>
                    <div class="col-xs-4">
                        <img src="2.jpg" width="100%" class="imagem-banner" />
                    </div>
                </div>
            </div>
        </li>
    </ul>



</body>

javascript

  • Work with the attribute onclick of img linking each image with a different page

1 answer

0

If that’s what I understand... you can work with the attribute onclick of img linking each image with a different page

JS:

   function visualizar(qual){
        switch (qual) {
        case 1: window.open("link1.html",'_blank');
            break;
        case 2: window.open("link2.html",'_blank');
            break;
        case 3: window.open("link3.html",'_blank');
            break;
        case 4: window.open("link4.html",'_blank');
            break;
        case 5: window.open("link5.html",'_blank');
            break;
        case 6: window.open("link6.html",'_blank');
            break;
        case 7: window.open("link7.html",'_blank');
            break;
        case 8: window.open("link8.html",'_blank');
            break;
        default:
            break;
        }
    };

HTML:

<img src="1.jpg" onclick="visualizar(1)"/>
<img src="2.jpg" onclick="visualizar(2)"/>
<img src="3.jpg" onclick="visualizar(3)"/>
<img src="4.jpg" onclick="visualizar(4)"/>
<img src="5.jpg" onclick="visualizar(5)"/>
<img src="6.jpg" onclick="visualizar(6)"/>
<img src="7.jpg" onclick="visualizar(7)"/>
<img src="8.jpg" onclick="visualizar(8)"/>

  • I managed to solve, thank you @

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.