I'm trying to create an image gallery. Most of it is working as intended, however, the thing I want to change on this gallery is so that when I click on the next picture or previous picture, I want the thumbnails to show the next 8 pictures. At the moment it's showing the next picture
PHP code:
<?php
$pics = glob("img/2016/*/*.{JPG,PNG,GIF,jpg,png,gif}", GLOB_BRACE);
if(count($pics)) {
rsort($pics);
foreach($pics as $pictures) {
echo "<a href='$pictures' target='_blank'><img class='Gallery' src='$pictures'></a>";
}
echo '<a class="button-floating lbutton" onclick="plusDivs(-1);plusThumbs(-1)"><div class="gall_nav">❮</div></a>';
echo '<a class="button-floating rbutton" onclick="plusDivs(1);plusThumbs(1)"><div class="gall_nav">❯</div></a>';
echo '</div>';
echo '<div class="thumbs_container">';
foreach(array_slice($pics, 1) as $thumbs)
if ($thumb++ < 8){
echo "<a href='$thumbs' target='_blank'><img class='thumbs' src='$thumbs'></a>";
}
} else {
echo "Sorry, no images to display!";
}
?>
The code is showing 1 thumbnail which updates correctly, but I want 8 thumbnails at least..
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("Gallery");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
var thumbIndex = slideIndex +1;
showThumbs(thumbIndex);
function plusThumbs(t){
showThumbs(thumbIndex += t);
}
function showThumbs(t){
var g;
var getThumb = document.getElementsByClassName("thumbs");
if (t > getThumb.length) {thumbIndex = 1}
if (t < 1) {thumbIndex = getThumb.length};
for (g = 0; g < getThumb.length; g++){
getThumb[g].style.display = "none";
}
getThumb[thumbIndex-1].style.display = "block";
}
}
Any ideas on how I achieve this?
I hope, I understood your idea and what you want to do. Anyway here is my advises. At first I would like to say, that building html tags using php is not even a good idea. It's always a better way to separate code, instead of making some kind of mix. So, I'll advice you to use your php script only to find all images and send an array of src to client side (in JSON format). When you get an array of src, you could make a gallery only using javascript or jQuery. With jQuery you could make a simple GET Ajax Request, in order to get an array of img's src. Then you could init your gallery.
The gallery you can make in this way:
So you have an id an change it by clicking prev or next buttons. After clicking you regenerate the current image and thumbs container.
Here is the working example (jQuery):
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="galery">
<div class="image_wrapper">
<button class="prev">Prev</button>
<img src="" alt="curr_image" class="curr_image" />
<button class="next">Next</button>
</div>
<div class="thumbs_wrapper"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var fakeSrc =
['src1', 'src2', 'src3', 'src4', 'src5', 'src6','src7', 'src8', 'src9', 'src10', 'src11'];
var cId = 0;
var thumbs_wrapper = $('.thumbs_wrapper');
var curr_image = $('.curr_image');
var prev = $('.prev');
var next = $('.next');
var updateThumbs = function() {
var max = ( (cId + 9) > fakeSrc.length) ? fakeSrc.length : cId + 9;
thumbs_wrapper.html('');
for (var i = cId+1; i < max; ++i) {
var img = document.createElement('img');
img.className = 'thumb_image';
var src = fakeSrc[i];
img.alt = src;
img.src = src;
thumbs_wrapper.append(img);
}
}
var setCurrImg = function() {
curr_image.src = fakeSrc[cId];
curr_image.prop('src', fakeSrc[cId]);
curr_image.prop('alt', fakeSrc[cId]);
}
var updateGalery = function() {
setCurrImg();
updateThumbs();
}
prev.click(function() {
--cId;
if (cId < 0) cId = 0;
updateGalery();
});
next.click(function() {
++cId;
if (cId > fakeSrc.length - 1) cId = fakeSrc.length - 1;
updateGalery();
});
updateGalery();
});
</script>
</body>
</html>
Hope, that I've helped you to find the solution.
Related
I hope anyone familiar with jQuery Reel Plugin can help me.
I have a table that dynamically loads images and on those images is an onclick function that is supposed to change the reel image to the corresponding cell item. The sprite is not changing away from the default one that is hard-coded.
I understand vaguely that I have to initialize the dynamic images with the "reel" class, but adding the attribute class="reel" doesn't do anything.
There is another question asking
the same thing
-- but I don't know jQuery and don't know how to apply the answer to my own project.
function previewIt(item) {
var reel = document.getElementById("previewReel");
reel.dataset.image = item.id + "sprite.png";
}
function headCatalogLoader() {
var table = document.getElementById("headCatalog");
var img = 2;
var uID = 8;
for (var i = 0; i <= 2; i++) {
var row = table.insertRow(i);
for (var k = 0; k <= 2; k++) { // 2 is because 3 columns
var skinTone = "none";
var cell = row.insertCell(k);
if (k == 0) {
skinTone = "lgt";
}
else if (k == 1) {
skinTone = "med";
}
else if (k == 2) {
skinTone = "drk";
}
cell.innerHTML = "<img src=\"headimgs/head" + skinTone + img + ".png\" id=\"head" + uID + skinTone + "\" onclick=\"previewIt(this)\" class=\"reel\">";
uID--;
}
img--;
}
}
<script src="http://test.vostrel.net/jquery.reel/jquery.reel.js" type="text/javascript"></script>
<div id="headPreview">
<img src="head1med.png" height="800"
id="previewReel"
class="reel"
data-image="head1medsprite.png"
data-frames="8"
data-footage="4">
</div>
I apologize if the code makes you cringe. If it's at all possible I'd like to do it purely in JavaScript, if not then a brief explanation would really help me out. Thank you friends.
Requirement :
You have a table, showing image dynamically
You want to apply reel only on image id="previewReel" when user click on the image from dynamically loaded images
Solution :
You need to change main image #previewReel reel image runtime.
$("#previewReel").reel("image", $(item).attr('src'));
Check below:
headCatalogLoader();
function headCatalogLoader() {
var table = document.getElementById("headCatalog");
var img = 2;
var uID = 8;
for (var i = 0; i <= 2; i++) {
var row = table.insertRow(i);
for (var k = 0; k <= 2; k++) { // 2 is because 3 columns
var skinTone = "none";
var cell = row.insertCell(k);
if (k == 0) {
skinTone = "lgt";
}
else if (k == 1) {
skinTone = "med";
}
else if (k == 2) {
skinTone = "drk";
}
cell.innerHTML = "<img src=\"https://picsum.photos/200/200/?image=65" + uID + "\" id=\"head" + uID + skinTone + "\" onclick=\"previewIt(this)\" \>";
uID--;
}
img--;
}
}
function previewIt(item) {
$("#previewReel").reel("image", $(item).attr('src')); ///this line will apply new reel
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.vostrel.cz/jquery.reel.js" type="text/javascript"></script>
<div id="headPreview">
<img src="https://picsum.photos/200/200" width="210" height="186"
id="previewReel"
class="reel"
data-image="https://picsum.photos/200/200"
data-frames="8"
data-footage="4"
data-revolution="800"
/>
</div>
<br><br>
<ul>
<li>Runtime table image loaded:</li>
<li>Click on any image, to load its reel effect above</li>
</ul>
<table id="headCatalog"></table>
I have a slideshow all put together but I'm having trouble using an onClick to insert an additional image. What am I missing?
function newDivs(n) {
var i;
var x = document.getElementsById("photo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
<input type="text" name="photo" id="photo" value="http://static.boredpanda.com/blog/wp-content/uuuploads/cute-baby-animals/cute-baby-animals-23.jpg" />
<button id="addPicture" onclick="newDivs(+1)">Add New Image</button>
You have many mistakes to begin with:
wrong:
var x = document.getElementsById("photo");
right:
var x = document.getElementById("photo").val;
There a few things you need to understand.
When you want to perform action on multiple element never try id. (ID always return only single element. and it can not be run with multiple element.
Your Javascript function is wrong getElementsById. correct is getElementById. just because of as i said ID return single element ( getElementById - just remove (s) from the function.
try to use query selector. like i have used in your example.(querySelectorAll)
Query selector function will help you a lot !. and if you are new in javascript. if you can try jQuery it will be really easy for you.
If you want to display image you need to play with img tag. right now you are getting URL from input tag and trying to hide them doesn't make sense ;
Here is the your solution
var i= 0;
var slideIndex = 0;
function newDivs(n) {
var i;
var x = document.querySelectorAll(".photo");
console.log(x);
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
};
for (var index = 0; index < x.length; index++) {
console.log(x[index].style);
x[index].style.display = 'none';
}
console.log(slideIndex);
x[slideIndex].style.display = "block";
}
<input type="text" class="photo" name="photo" id="photo" value="http://static.boredpanda.com/blog/wp-content/uuuploads/cute-baby-animals/cute-baby-animals-23.jpg" />
<button id="addPicture" onclick="newDivs(+1)">Add New Image</button>
I'm trying to make the array go backward with a second html button but for some reason I can't, this code makes the Div change color even the same color as many times as you wish. Right now my doubt is how to make it cycle backwards or decrement some how?
<head>
<title></title>
<style>#placeDiv{width:100px;height:100px;}</style>
</head>
<body>
<div id = "placeDiv">ok</div>
<button onclick="forward()">Forward</button>
<script>
var myArray = ["black","yellow","black","red","blue"];
var i = 0;
function forward(){
if(myArray.length <= i) i=0;
document.getElementById("placeDiv").style.backgroundColor = myArray[i++];
};
</script>
</body>
I have added the complete correct implementation of the thing you asked with the jsfiddle link.
HTML
<div id = "placeDiv">ok</div>
<button onclick="forward()">Forward</button>
<button onclick="backward()">Backward</button>
JS
var myArray = ["black","yellow","green","red","blue"];
var i = 0;
document.getElementById("placeDiv").style.backgroundColor = myArray[i];
forward=function(){
if(i == myArray.length-1)
{i=0;}
else
{i=i+1;}
document.getElementById("placeDiv").style.backgroundColor = myArray[i];
};
backward=function(){
if(i == 0)
{i=myArray.length-1;}
else
{
i=i-1;
}
document.getElementById("placeDiv").style.backgroundColor = myArray[i];
}
And the JSFiddle link in which i have the demo
http://jsfiddle.net/96azU/1/
You can try this:
var myArray = ["black","yellow","black","red","blue"];
var i = 0;
function forward(){
if (myArray.length == i) i = 0;
document.getElementById("placeDiv").style.backgroundColor = myArray[i++];
};
function backward(){
if (i == -1) i = myArray.length - 1;
document.getElementById("placeDiv").style.backgroundColor = myArray[i--];
};
I have five images in a folder of my computer and I'm trying to create a script that display an image on the screen and when I click a button the image changes.
The javaScript code:
function cambiaimagen()
{
var i=1;
var direcciones = new
Array("imagen1.jpg","imagen2.jpg","imagen3.jpg","imagen4.jpg","imagen5.jpg");
var vusr = document.getElementById('imgs').value;
document.getElementById('imgs').innerHTML = vusr;
}
The HTML code:
<div id="contenedor">
<div id="img">
<img id="imgs" src="imagen1.jpg"/>
</div>
<button type="button">Anterior</button>
<button type="button" onclick = 'cambiaimagen()'>Siguiente</button>
</div>
When I run the script I watch the image 1 and the buttons. But when I click Siguiente button I don't watch the following image of array direcciones.
How can I watch it?
Thanks.
Replace your previous JavaScript code with this:
var cnt = 1;
var direcciones = new Array("imagen1.jpg","imagen2.jpg","imagen3.jpg","imagen4.jpg","imagen5.jpg");
function cambiaimagen(){
if(cnt != direcciones.length - 1){
cnt++;
}else{
cnt = 1;
}
document.getElementById('imgs').src = direcciones[cnt];
}
If the image names are in sequential number order (as they are in your example), you could use the following instead:
var cnt = 1;
var imgCnt = 5;
function cambiaimagen(){
if(cnt != imgCnt){
cnt++;
}else{
cnt = 1;
}
document.getElementById('imgs').src = "imagen" + cnt + "2.jpg";
}
Which I believe is a better method because there is no array with repetitive contents.
var direcciones = ["imagen1.jpg","imagen2.jpg","imagen3.jpg","imagen4.jpg","imagen5.jpg"];
var cnt = 0;
function cambiaimagen(){
document.getElementById("imgs").src = direcciones[(++cnt)%direcciones.length];
}
within a function, I'm trying to replace a image/button with another image/button.
<img src="images/14.gif" id="ImageButton1" onClick="showLoad()">
<img src="images/getld.png" id="ImageButton2" alt="Get Last Digits" style="display:none;" onClick="showLock()" />
<script type="text/javascript" language="javascript">
function swapButton(){
document.getElementById('ImageButton1').src = document.getElementById('ImageButton2').src;
}
</script>
But I have the problem that there is two of the same button, (button 2) when it is replaced! (one at the top of the page, and one where it is meant to be). I was wondering if there is a way of getting rid of the extra button at the top, or creating the button element within the javascript function?
Thanks for any help.
You can remove an element in javascript using
var el = document.getElementById('id');
var remElement = (el.parentNode).removeChild(el);
You can hide the first button, not only change the image source. The code below shows one way of doing that.
<img src="images/14.gif" id="ImageButton1" onClick="swapButtons(false)" style="visibility: visible;" />
<img src="images/getld.png" id="ImageButton2" alt="Get Last Digits" style="visibility: hidden;" onClick="swapButtons(true)" />
<script type="text/javascript" language="javascript">
function swapButtons(show1) {
document.getElementById('ImageButton1').style.visibility = show1 ? 'visible' : 'hidden';
document.getElementById('ImageButton2').style.visibility = show1 ? 'hidden' : 'visible';
}
</script>
I'd suggest something akin to the following:
function swapImageSrc(elem, nextElemId) {
if (!elem) {
return false;
}
if (!nextElemId || !document.getElementById(nextElemId)) {
var id = elem.id.replace(/\d+/, ''),
nextNum = parseInt(elem.id.match(/\d+/), 10) + 1,
next = document.getElementById(id + nextNum).src;
}
else {
var next = document.getElementById(nextElemId).src;
}
elem.src = next;
}
var images = document.getElementsByTagName('img');
for (var i = 0, len = images.length; i < len; i++) {
images[i].onclick = function() {
swapImageSrc(this,imgButton2);
};
}
JS Fiddle demo.
Edited to add that, while it is possible to switch the src attribute of an image it seems needless, since both images are present in the DOM. The alternative approach is to simply hide the clicked image and show the next:
function swapImageSrc(elem, nextElemId) {
if (!elem) {
return false;
}
if (!nextElemId || !document.getElementById(nextElemId)) {
var id = elem.id.replace(/\d+/, ''),
nextNum = parseInt(elem.id.match(/\d+/), 10) + 1,
next = document.getElementById(id + nextNum);
}
else {
var next = document.getElementById(nextElemId);
}
if (!next){
return false;
}
elem.style.display = 'none';
next.style.display = 'inline-block';
}
var images = document.getElementsByTagName('img');
for (var i = 0, len = images.length; i < len; i++) {
images[i].onclick = function() {
swapImageSrc(this,imgButton2);
};
}
JS Fiddle demo.
Edited to offer an alternate approach, which moves the next element to the same location as the clicked image element:
function swapImageSrc(elem, nextElemId) {
if (!elem) {
return false;
}
if (!nextElemId || !document.getElementById(nextElemId)) {
var id = elem.id.replace(/\d+/, ''),
nextNum = parseInt(elem.id.match(/\d+/), 10) + 1,
next = document.getElementById(id + nextNum);
}
else {
var next = document.getElementById(nextElemId);
}
if (!next){
return false;
}
elem.parentNode.insertBefore(next,elem.nextSibling);
elem.style.display = 'none';
next.style.display = 'inline-block';
}
var images = document.getElementsByTagName('img');
for (var i = 0, len = images.length; i < len; i++) {
images[i].onclick = function() {
swapImageSrc(this,imgButton2);
};
}
JS Fiddle demo.