Προς το περιεχόμενο

Κατακόρυφο image toolbar ?

masteripper

Από τον masteripper
στο Web Design - Development

 Share

Προτεινόμενες αναρτήσεις

masteripper Crazy Insomniac

masteripper

Δημοσ.
Δημοσ.

Γεια χαρά σε όλους

Θέλω να υλοποιήσω κάτι σαν το παρακάτω

Base.jpg

Ουσιαστικά εκεί που είναι ουσιαστικά οι εικονίτσες θα είναι κάτι στατικό σαν toolbar τοποθετημένο στα δεξιά το οποίο θα πατάω στην εικόνιτσα και ανάλογα θα εμφανίζεται το περιεχόμενο στο κόκκινο τετράγωνο το οποίο θα είναι scrollable και θα έχει το περιεχόμενο..

Δεν μπορώ να βρώ τον ορισμό του για να δω πως θα το προσεγγίσω...

dominotrix Community Regular

dominotrix

Δημοσ.
Δημοσ.

Αυτο ειναι iframe που θελεις, αν και δεν θεωρειται και πολυ καλη η χρηση του.

 

Μπορεις να το κανεις με χρηση CSS και JS (jQuery κυριως).

 

Ψαξε για jquery hide show στο google. Αν εχεις βασικες γνωσεις θα το καταφερεις ευκολα. Αν οχι, τοτε δοκιμασε με iframe.

 

Το δεξι toolbar θα ειναι με position:fixed στατικο.

 

Θα εισαγεις στη σελιδα και τα 4 περιεχεομενα αλλα τα 3 θα ειναι display none ενω το ενα με display block.

 

Αναλογως το πιο κλικ κανει ο επισκεπτης θα εμφανιζεις το περιεχομενο και θα κρυβεις τα υπολοιπα.

tzotzosgr Contributor

tzotzosgr

Δημοσ.
Δημοσ.

Καλησπέρα,

 

giphy.gif

 

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>demo tzotzosgr</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <style type="text/css">
	body {
		padding: 0;
		margin: 0;
		background: #fff;
	}
	
	.graph {
		margin-top: 10px;
		box-sizing: border-box;
		border-radius: 4px;
		background-clip: padding-box;
		background-color: #fff;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
	}
	
	.graph-content {
		padding: 10px;
		position: relative;
		overflow: hidden;
	}
	
	.graph-content img {
		background-clip: padding-box;
		position: relative;
	}
	
	.carousel-inner {
		padding-bottom: 20px;
	}
	
	.carousel-inner h2 {
		display: inline;
	}
	
	.carousel-inner p {
		display: inline;
		padding-left: 10px;
	}
	
	.controls img {
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
	}
	
	#custom_carousel .controls {
		overflow-x: auto;
		overflow-y: hidden;
		padding-top: 60px;
		margin: 0;
		text-align: center;
		position: relative;
	}
	
	#custom_carousel .controls li.active {
		background-color: #eee;
	}
	
	#custom_carousel .controls a small {
		overflow: hidden;
		display: block;
		font-size: 10px;
		margin-top: 5px;
		font-weight: bold;
	}
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <!-- Start Carousel -->
                <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="0">
                    <div class="row clearfix">

                        <div class="col-md-10 col-sm-10 column">
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="graph">
                                                    <div class="graph-content"> <img src="http://placehold.it/700x900" height="400" width="900px"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="graph">
                                                    <div class="graph-content"> <img src="http://placehold.it/700x900" height="400" width="900px"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="graph">
                                                    <div class="graph-content"> <img src="http://placehold.it/700x900" height="400" width="900px"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Item -->
                            </div>
                            <!-- End Carousel Inner -->

                        </div>

                        <div class="col-md-2 col-sm-2 column">
                            <div class="controls">
                                <ul class="nav">
                                    <li data-target="#custom_carousel" data-slide-to="0" class="active">
                                        <a href="#"><img src="http://placehold.it/50x50" height="50%" width="50%"></a>
                                    </li>
                                    <li data-target="#custom_carousel" data-slide-to="1">
                                        <a href="#"><img src="http://placehold.it/50x50" height="50%" width="50%"></a>
                                    </li>
                                    <li data-target="#custom_carousel" data-slide-to="2">
                                        <a href="#"><img src="http://placehold.it/50x50" height="50%" width="50%"></a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function(ev) {
		$('#custom_carousel').on('slide.bs.carousel', function(evt) {
			$('#custom_carousel .controls li.active').removeClass('active');
			$('#custom_carousel .controls li:eq(' + $(evt.relatedTarget).index() + ')').addClass('active');
		})
	});
    </script>
</body>

</html>

post-315377-0-13233600-1497005625_thumb.gif

masteripper Crazy Insomniac

masteripper

Δημοσ.
  • Μέλος
Δημοσ.

Καλησπέρα,

 

giphy.gif

 

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>demo tzotzosgr</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <style type="text/css">
	body {
		padding: 0;
		margin: 0;
		background: #fff;
	}
	
	.graph {
		margin-top: 10px;
		box-sizing: border-box;
		border-radius: 4px;
		background-clip: padding-box;
		background-color: #fff;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
	}
	
	.graph-content {
		padding: 10px;
		position: relative;
		overflow: hidden;
	}
	
	.graph-content img {
		background-clip: padding-box;
		position: relative;
	}
	
	.carousel-inner {
		padding-bottom: 20px;
	}
	
	.carousel-inner h2 {
		display: inline;
	}
	
	.carousel-inner p {
		display: inline;
		padding-left: 10px;
	}
	
	.controls img {
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12);
	}
	
	#custom_carousel .controls {
		overflow-x: auto;
		overflow-y: hidden;
		padding-top: 60px;
		margin: 0;
		text-align: center;
		position: relative;
	}
	
	#custom_carousel .controls li.active {
		background-color: #eee;
	}
	
	#custom_carousel .controls a small {
		overflow: hidden;
		display: block;
		font-size: 10px;
		margin-top: 5px;
		font-weight: bold;
	}
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <!-- Start Carousel -->
                <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="0">
                    <div class="row clearfix">

                        <div class="col-md-10 col-sm-10 column">
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="graph">
                                                    <div class="graph-content"> <img src="http://placehold.it/700x900" height="400" width="900px"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="graph">
                                                    <div class="graph-content"> <img src="http://placehold.it/700x900" height="400" width="900px"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="graph">
                                                    <div class="graph-content"> <img src="http://placehold.it/700x900" height="400" width="900px"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Item -->
                            </div>
                            <!-- End Carousel Inner -->

                        </div>

                        <div class="col-md-2 col-sm-2 column">
                            <div class="controls">
                                <ul class="nav">
                                    <li data-target="#custom_carousel" data-slide-to="0" class="active">
                                        <a href="#"><img src="http://placehold.it/50x50" height="50%" width="50%"></a>
                                    </li>
                                    <li data-target="#custom_carousel" data-slide-to="1">
                                        <a href="#"><img src="http://placehold.it/50x50" height="50%" width="50%"></a>
                                    </li>
                                    <li data-target="#custom_carousel" data-slide-to="2">
                                        <a href="#"><img src="http://placehold.it/50x50" height="50%" width="50%"></a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function(ev) {
		$('#custom_carousel').on('slide.bs.carousel', function(evt) {
			$('#custom_carousel .controls li.active').removeClass('active');
			$('#custom_carousel .controls li:eq(' + $(evt.relatedTarget).index() + ')').addClass('active');
		})
	});
    </script>
</body>

</html>

attachicon.gifdemo-tzotzosgr.gif

Είσαι ΩΡΑΙΟΣ.....αυτό ακριβώς ήθελα...

tzotzosgr Contributor

tzotzosgr

Δημοσ.
Δημοσ.

Είσαι ΩΡΑΙΟΣ.....αυτό ακριβώς ήθελα...

 

Εσύ απλά παίξε λίγο τώρα με τα css... εύκολο είναι (αν γνωρίζεις τα βασικά)  :-D

masteripper Crazy Insomniac

masteripper

Δημοσ.
  • Μέλος
Δημοσ.

Εσύ απλά παίξε λίγο τώρα με τα css... εύκολο είναι (αν γνωρίζεις τα βασικά)  :-D

 

Φίλε μου κάτι για να ξεκινήσω ήθελα.....απο εδώ και πέρα πιστεύω θα το φέρω στα μέτρα μου...

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...