Javascript Image slider Problémám van

Javascript Image slider Problémám van
2017-11-16T11:53:56+01:00
2017-11-16T12:30:11+01:00
2022-10-15T21:40:57+02:00
kisskillersMI
Sziasztok sürgősen kellene egy kis segítség, kint vagyok bécsben a co-spacennél és adtak egy projektet amivel jól állok viszont elakadtam egy prezentációt image sliderben mutatok be és ez 10 képből áll és a 7. képnél van 2 videó amit ugy szeretnék meg oldani hogy amikor azt a képet látom akkor jöjjön fel két gomb ami elvisz a videókhoz. Remélem tudtok segiteni



<?php
session_start();

if (!isset($_SESSION['username'])) {
$_SESSION['msg'] = "You must log in first";
header('location: login.php');
}

if (isset($_GET['logout'])) {
session_destroy();
unset($_SESSION['username']);
header("location: login.php");
}

?>
<!DOCTYPE html>
<html>
<head>
<title>Presentation Page</title>
<style>


@font-face {
font-family:Comic Sans Ms;
src:url("Comic Sans Ms");
}

* {
margin: 0px;
padding: 0px;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: #414247;
font-family:Comic Sans Ms;
}

.header {
width: 100%;
margin:;
color: orange;
background: #888E91;
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 10px 10px;
padding: 0;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
background: #888E91;
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}

.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: #00DEFF;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
}


.header {
width: 100%;
margin:;
color: white;
background: #888E91;
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 0;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 3px solid #6088A0;
border-radius: 0px 0px 10px 10px;
background: #626566;
}
.input-group {
margin: 10px 0px 10px 0px;
background: #626566;
text-color: orange;
}

.input-group label {
display: block;
text-align: left;
margin: 3px;
background: #626566;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid red;
background: #36627C;
}

.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}

.contains{
position: relative;
width: 50%;
}

.image {
opacity: 1;
display: block;
width: 450;
height: 450;
transition: .5s ease;
backface-visibility: hidden;
}

.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}

.container:hover .image {
opacity: 0.3;
}

.container:hover .middle {
opacity: 1;
}

.text {
background-color: #414247;
color: anyad;
font-size: 32;
padding: 16px 32px;

}

a:link {color:#2554C7;} /* még nem látogatott link */
a:visited {color:#2554C7;} /* már meglátogatott link */
a:hover {color:red;} /* kurzor alatti link */
a:active {color:#2554C7;} /* kiválasztott link */

input[type=text] {

color: #D2691E;
font-weight: bold;
}

input[type=email] {

color: #D2691E;
font-weight: bold;
}

input[type=password] {

color: #D2691E;
font-weight: bold;
}
.maintext{
list-style-type: none;
margin: px;
padding: px;
overflow: hidden;
background-color: #333333;
color: #2554C7;
float: center;
font-size: 32;

}

div.gallery {
margin: px;
border: 1px solid #ccc;
padding: 5px 10px;
font-size: 16px;
border: 1px solid gray;
width: 45%;
margin: 0px auto;
padding: px;
border: 3px solid #6088A0;
border-radius: 0px 0px 10px 10px;
background: #626566;
}

div.gallery:hover {
border: 1px solid #777;
}

div.desc {
padding: 15px;
text-align: center;
}
#kontener{
position: relative;
width:950px;
height:520px;
border:1px solid black;
margin: 0 auto 0 auto;
}
#kontener>img{
width:100%;
height:100%;
position:absolute;

}
#kontener>button{
position: absolute;
}
/*Next*/
#kontener>.button {
left: 950px;
top: 260px;
display: inline-block;
border-radius: 100%;
background-color:rgba(255, 255, 255, 0.5);
border: none;
color: #000000;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100pxs;
transition: all 0.5s;
cursor: pointer;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}


.button:hover span:after {
opacity: 1;
right: 1;

}

.button:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius:100%;
z-index: 0;
opacity: 0;
background-color: rgba(0,0,128,0.4);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);

}

.button:hover:before {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);

}
/*Last*/
#kontener>.button2 {
left:-100px;
top: 260px;
display: inline-block;
border-radius: 4px;
background-color:rgba(255, 255, 255, 0.5);
border: 0px;
border-radius:100%;
color: #000000;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}

.button2 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button2 span:after {
content: '\00ab';
position: absolute;
opacity: 0;
top: 0;
left: -20px;
transition: 0.5s;
}


.button2:hover span:after {
opacity: 1;
left: 1;

}


.button2::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius:100%;
z-index: 1;
opacity: 0;
background-color: rgba(0,0,128,0.4);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: scale(1, 0.5);
transform: scale(1, 0.5);
}
.button2:hover::before{
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}

</style>
</head>
<body>
<font face="Comic Sans Ms ">

<b>
<table width="100%" align="center">
<tr>
<td align="center">
<ul align="center">
<li align="center"><a href="index.php">Home Page</a></li>
<li align="center"><a href="tcml.php">The COM-lab</a></li>
</ul>
</td>
</tr>
</table>
</b>
<center>
</center>

<div class="content">

<!-- notification message -->
<?php if (isset($_SESSION['success'])) : ?>
<div class="error success" >
<h3>
<?php
echo $_SESSION['success'];
unset($_SESSION['success']);
?>
</h3>
</div>
<?php endif ?>

<!-- logged in user information -->
<?php if (isset($_SESSION['username'])) : ?>
<p><b><font color="#00DEFF">Welcome </b><strong><?php echo $_SESSION['username']; ?></strong>

<a href="index.php?logout='1'" style="color: #A00000;" >logout</a> </p>
<?php endif ?>
</div>

<div id="kontener" >

<img class="cospace" src="ppt/1.png" />
<img class="cospace" src="ppt/2.png" />
<img class="cospace" src="ppt/3.png" />
<img class="cospace" src="ppt/4.png" />
<img class="cospace" src="ppt/5.png" />
<img class="cospace" src="ppt/6.png" />
<img class="cospace" onload="loadImage()"id="vid" src="7.png" />
<img class="cospace" src="ppt/8.png" />
<img class="cospace" src="ppt/9.png" />
<img class="cospace" src="ppt/10.png" />
<button class="button2" onclick="plusDivs(-1)" ><span>Prev</span></button>
<button class="button" onclick="plusDivs(1)" ><span>Next</span></button>

</div>


</font>
</body>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
showDivs(slideIndex +=n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("cospace");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x.style.display = "none";
}
x[slideIndex-1].style.display = "block";
}

function loadImage() {

if(button.Click == 7)
{
alert("Image is loaded");
}
}



</script>
</html>
Mutasd a teljes hozzászólást!
Csatolt állomány

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd