Hello guys I'm having problem
- when I click on a certain bullet an Error comes up in the console function
Uncaught ReferenceError: changeimage is not defined
I'm calling the function in php not just in js.
echo 'Bullet
See the galleryNavigationBullets div to see the name function
'; } ?>
<div class="galleryPreviewArrows"> <a href="#" class="previousSlideArrow"><</a> <a href="#" class="nextSlideArrow">></a> </div> </div> <div class="galleryNavigationBullets"> <?php for ($b = 1; $b <= $imagesTotal; $b++) { echo '<a href="javascript: changeimage(' . $b . ')" class="galleryBullet' . $b . '"><span>Bullet</span></a> '; } ?> </div> <div class="galleryDescription"> <?php for ($x = 1; $x <= $imagesTotal; $x++) { echo '<div class="description' . $x . '">' . $description[$x] . '</div>'; } ?> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/plugins.js"></script> <script type="text/javascript"> // init variables var imagesTotal = <?php echo $imagesTotal; ?>; var currentImage = 1; var thumbsTotalWidth = 0; </script>
the jquery code : plz see the bullet code !
$(document).ready(function(){
$('a.galleryBullet' + currentImage).addClass("active");
$('div.description' + currentImage).addClass("visible");
// PREVIOUS ARROW CODE
$('a.previousSlideArrow').click(function() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
$('div.description' + currentImage).removeClass("visible");
currentImage--;
if (currentImage == 0) {
currentImage = imagesTotal;
}
$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();
$('div.description' + currentImage).addClass("visible");
return false;
});
// ===================
// NEXT ARROW CODE
$('a.nextSlideArrow').click(function() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
$('div.description' + currentImage).removeClass("visible");
currentImage++;
if (currentImage == imagesTotal + 1) {
currentImage = 1;
}
$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();
$('div.description' + currentImage).addClass("visible");
return false;
});
// ===================
// BULLETS CODE
function changeimage(imageNumber) {
$('img.previewImage' + currentImage).hide();
currentImage = imageNumber;
$('img.previewImage' + imageNumber).show();
$('.galleryNavigationBullets a').removeClass("active");
$('.galleryDescription > div').removeClass("visible");
$('a.galleryBullet' + imageNumber).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('div.description' + currentImage).addClass("visible");
}
// ===================
// AUTOMATIC CHANGE SLIDES
function autoChangeSlides() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
$('div.description' + currentImage).removeClass("visible");
currentImage++;
if (currentImage == imagesTotal + 1) {
currentImage = 1;
}
$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();
$('div.description' + currentImage).addClass("visible");
}
var slideTimer = setInterval(function() {autoChangeSlides(); }, 3000);
});
css
/* General Ruels */
.container {padding:0 25px;}
* , *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin:0;
padding:0;
}
ul {list-style: none;}
nav ul li {color:white;}
.fb {display: flex;}
/* Header Styles */
header {background: #232323;}
.hdr-logo {position:relative; }
.hdr-logo a {background-image:url("../images/logo.png"); background-repeat: no-repeat; height:40px; width:153px; display: inline-block;}
.container.fb.hdr-ex { justify-content: space-between; padding: 17px 25px; }
.hdr-ex nav ul.fb.ul-ex { padding-top: 13px; }
.ul-ex li { padding: 0 5px; font-weight: 500; font-size: 14px; cursor:pointer; }
.sch-con {padding:8px 0;}
.sch-con #sch {padding:3px 8px; background-color: rgb(68, 68, 68); border:0; width:100%;}
.btn-con {padding:8px 0;}
.btn-con #btn {color:white; background-color: rgb(3, 151, 214); border:0; padding:3px 8px;}
.body1 { background-color:#1A1A1A; }
.news {color:#fff;}
.news h2 {font-size: 14px;}
/* Media Queries stuff */
@media screen and (max-width: 1199px) {
}
@media (min-width:991px) and (max-width:1899px) {
.sch-con {width:153px;}
}
/* Slider Sites */
.galleryContainer a {
transition: all 150ms linear;
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
}
.galleryContainer {
margin: 40px auto;
width: 900px;
}
.galleryPreviewContainer {
position: relative;
}
.galleryPreviewImage img {
display: none;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
box-shadow: 5px 5px 0 0 #c1c1c1;
position: relative;
top: 0;
left: 0;
}
img.previewImage1 {
display: block;
}
.galleryPreviewArrows a {
font-family: Arial;
font-size: 30px;
background: rgba(0,0,0, 0.3);
width: 70px;
height: 70px;
line-height: 70px;
display: block;
text-align: center;
color: #FFF;
text-decoration: none;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
position: absolute;
left: 20px;
top: 50%;
margin-top: -35px;
}
a.nextSlideArrow {
right: 20px;
left: auto;
}
.galleryPreviewArrows a:hover {
background: #000;
margin-top: -40px;
}
.galleryNavigationBullets {
text-align: center;
margin-top: 20px;
margin-bottom: 60px;
}
.galleryNavigationBullets span {
display: none;
}
.galleryNavigationBullets a {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
background: #ddd;
}
.galleryNavigationBullets a:hover,
.galleryNavigationBullets a.active {
background: #555;
}
.galleryDescription > div {
display: none;
}
.galleryDescription > div.visible {
display: block;
}
thank you so much