I need help on creating a vertical thumbnail with three images on display with prev. and next buttons to display the other images. These images are looped from a database. The image below is a preview of what I would like to have. Like for example I have 5 images, my page should display 1st 2nd and 3rd images. Then by clicking next button it should hide 1st image and display only 2nd, 3rd, and 4th images. Any help would be appreciated.
so far, this is what i've accomplished.
I just hide the extra images using css "overflow:hidden". I don't know how to add previous and next buttons to bring them up.
This is some of my codes:
{foreach from=$images item=i name=images}
{if $smarty.foreach.images.iteration <= 16 }
<div class="thumbnail col-md-12 col-sm-12 col-xs-12"><a href="{$i.image_url|amp}" thumb="{$i.image_url|amp}" data-fancybox-group="gallery" class="fancybox" {if $smarty.foreach.images.iteration eq 1} id="first_icon"{/if} onclick="return {if $config.Detailed_Product_Images.is_jqzoom eq 'Y'}false{else}dicon_click({$smarty.foreach.images.iteration}, '{$config.Detailed_Product_Images.det_slideshow_delay}', '{$images_counter}');{/if}" {if $config.Detailed_Product_Images.is_rollover eq 'Y'} onmouseover="func_mouse_over(this, {$i.thbn_image_x}, {$i.thbn_image_y});"{/if} target="_blank">
<img src="{$i.image_url|amp}" alt="" >
</a></div>
{/if}
{/foreach}
This part is for displaying the thumbnail only. Don't mind the href portion.
Here's an updated answer. It's a little tricky since you have to fiddle with the DOM to get the images to scroll around in a carousel fashion. What this does is gets the thumbnail images and shows the first three, while hiding the rest.
Then, each time the next button is clicked, it removes the first image from the DOM and slams it on the end of the list, then shows the first three images while hiding the rest.
So you really don't need an array, but you kinda have the same idea going: take the first thing off, put it on the end, then show the first three and hide the rest.
EDIT: I realized we don't need to use JavaScript to show/hide the elements, it's much simpler with CSS. Just remove the first child, append him to the end and let CSS display the first 3 children.
var thumbs = document.querySelector('.thumbs');
var next = document.querySelector('button');
next.addEventListener('click', function() {
var child = thumbs.removeChild(thumbs.firstElementChild);
thumbs.appendChild(child);
});
.thumb {
width: 100px;
height: 100px;
border: 1px solid black;
font-family: sans-serif;
text-align: center;
line-height: 100px;
margin: 10px;
display: none;
}
.thumb:nth-child(-n+3) {
display: block;
}
<div class="thumbs">
<div class="thumb">
img 1
</div>
<div class="thumb">
img 2
</div>
<div class="thumb">
img 3
</div>
<div class="thumb">
img 4
</div>
<div class="thumb">
img 5
</div>
</div>
<button>
Next
</button>
Here's an example of an image gallery that was used to answer a different question, but you can see the idea with the "Next" button.
https://jsfiddle.net/subterrane/bb196sts/
button.addEventListener('click', function() {
for (var ix = 0; ix < images.length; ix++) {
images[ix].style.display = 'none';
}
index++;
if (index >= images.length) index = 0;
images[index].style.display = 'block';
});
You add an event handler to your button(s) and show/hide the images appropriately.
Related
I'm trying to create a gallery with a main image and smaller images below,by clicking on the main image it should open it in a new window, and if you click smaller one, it should change the main image to that you cliked and it also change href, so in the end, main image is dynamicly changing href and src attributes.
Below you could see how I try to do this, it's working, but when i press smaller images, they not only change the main one, but also opens in the new window. What should I do, so only main image could open new window?
function transitSrc(imgs) {
// Get the expanded image
var expandImg = document.getElementById("expandedImg");
// Use the same src in the expanded image as the image being clicked on from the grid
expandImg.src = imgs.src;
//Get the href of expanded image
var fullImage = document.getElementById("viewFullImg");
//Use the same href in the expanded image as the image being clicked on from the grid
fullImage.href = imgs.href;
// Show the container element (hidden with CSS)
expandImg.parentElement.style.display = "block";
}
.product-gallery {
list-style: none;
padding: 0;
width: 100%;
margin: 10px 0 0;
}
.product-gallery li {
display: inline-block;
width: 15%;
margin: 0 5px;
}
.product-gallery li:first-child {
margin-left: 0;
}
<div class="container">
<div class="row">
<div class="col-sm-6 mb-sm-40">
<div class="gallery">
//main image
<a id="viewFullImg" href="https://picsum.photos/id/1060/536/354?blur=2">
<img id="expandedImg" src="https://picsum.photos/id/1060/536/354?blur=2" style="width:50%">
</a>
</div>
//smaller images
<ul class="product-gallery">
<li>
<img style="width:80%" src="https://picsum.photos/id/870/536/354?grayscale&blur=2" onclick="transitSrc(this);">
</li>
<li>
<img style="width:80%" src="https://picsum.photos/id/1060/536/354?blur=2" onclick="transitSrc(this);">
</li>
<li>
<img style="width:80%" src="https://picsum.photos/id/870/536/354?grayscale&blur=2" onclick="transitSrc(this);">
</li>
</ul>
</div>
</div>
</div>
To obtain your desired behavior, you could use one of two approach:
Remove the a tag
Keep the tag and prevent its default behavior
The first method it's pretty straight forward, while, to prevent the a tag to do the redirect, you could override onClick preventing its default behavior:
function prevent(event) {
event.preventDefault();
}
Press here
https://leiacarts.github.io/index.html
https://codepen.io/leiacarts/pen/PoqRxNZ
I'm trying to get images to show in the red portions and to stay within the content div, but any time I add images, the layout breaks. I would really appreciate some help with these two things I want to achieve and thank you in advance:
1.) keep images constrained to and auto resizable within the (red) content div
2.) hide the images when the section is "shut" onclick.
HTML:
<div class="section">
<div class="bookmark">↑ ten ↔ sion ↓</div>
<div class="content"><p></p>
<!-- <div class="space"></div> -->
<!-- <img class="fit" src="images/ziptiesmall.png">
<img class="fit" src="images/ziptiesmall2.png">
<img class="fit" src="images/ziptiesmall3.png"> -->
</div>
</div>
the JavaScript:
var sections = document.querySelectorAll(".section")
sections.forEach(function(section) {
section.addEventListener("click", expandSection);
})
function expandSection(event) {
let section = (event.target.classList.contains("section")) ? event.target : event.target.parentNode;
sections.forEach(function(section) {
section.classList.remove("open")
})
section.classList.add("open");
}
I just added this class to the rest of the divs which didnt have any images on them, hence the reason for them to show the red content div. Remove the 100%, the image text in between every column as well and create ids for every column and add background image to them and you are good to go :).
.content.bg.zip {
margin-left: 40px;
/* width: 100%; */
background-color: #000;
background-image: url(images/ziptiepattern.png);
background-repeat: repeat;
}
I have created some kind of gallery with php code. I wanted to animate going to the next set of pictures with JQuery hide() and show(). The problem is that when I show the next set of pictures, the pictures aren't showing next to each other anymore but in a vertical row.
The original display type is "inline-block", but when I put the css function after the animate function, the animation looks weird.
I tried creating a JsFiddle but The Javascript part doesn't seems to be working http://jsfiddle.net/P3gty/
This is my code:
Javascript
function changeGallery(count)
{
currentpage+=count;
for(var i=0;i<numpics;i++)
{
//document.getElementById("galpic"+(i)).style.display = "none";
$("#galpic"+(i)).hide(animationtype,animationspeed);
}
for(var i=0;i<8 && ((currentpage*8))+i<numpics;i++)
{
//document.getElementById("galpic"+(i+(currentpage*8))).style.display = "block";
$("#galpic"+(i+(currentpage*8))).delay(animationspeed).show(animationtype,animationspeed);
}
disableButtons();
}
css
.thumb
{
border:solid black .1em;
display: inline-block;
}
html
<div id="thumbcontainer">
<ul id="pictures">
<!-- Multiple echos of -->
<li id='galpic$imagecount'><a href='img/gallery/".$file."'rel='lightbox[".$lightbox."]'>
<img src="img/thumbs/'.$file.'" alt="Picture" class="thumb" />
</a></li>
</ul>
</div>
HTML:
<html>
<head>
<script type="text/javascript" src="jscript/jquery.js"></script>
</head>
<body>
<div class="slider_b">
<img src="img/frame_wood_back_460_380.jpg">
<img src="img/01_french_train_480_360.jpg">
<img src="img/05_cherries_480_360.jpg">
<img src="img/06_wheat_480_360.jpg">
<img src="img/10_renault_480_360.jpg">
</div>
<div id="button"><img src="img/06_wheat_480_360.jpg" width="48px" height="auto"></div>
<script>
setInterval("switchit()", 3000);
$('.slider_b img:gt(0)').hide();
function switchit() {
$('.slider_b img:first-child').fadeOut(0).next('img').fadeIn(2000).end().appendTo('.slider_b');
}
</script>
</body>
</html>
CSS:
.slider_box img{
position:relative;
top:0px;
left: 0px; }
.slider_box {
position:absolute;
width: 480px;
height: 360px; }
#button {
position: relative;
top: 10px;
left: 500px;}
The slideshow works - I just could not figure out how to switch the slideshow to one of the images by clicking a thumbnail button (id=button) - the slideshow should continue then in the regular circle order.
You could add a data attribute to your <img> elements, and append the button with the first child <img>element to carry over that data attribute. e.g:
<img src="" data-slide="1">
And for the append
var thumbnail = $("div.slider_b").find("img:first");
$("#button > img").replaceWith(thumbnail);
Once this is done, make it so that
("#button").on(click, function() {
var moveTo = $(this).find("img").data(slide);
var item = $("div.slider_b").find("[data-slide='" + moveTo + "']"
$("div.slider_b).prepend(item);
}
I'm not 100% right with the jQuery, but I believe I'm on the right lines. A bit more exploration down this route will get you to where you need to be.
Try making a relation between the slide and its thumbnail to fetch the respective slide, e.g. by using attibutes pairs, like data-slide="slide1" for the thumbnail and id="slide1" for the actual slide
on thumbnail click, adjust the current slide to the respective one and continue auto animation from this point
Point one is just one solution, it's the creativity part ;) You could come up with something else, like e.g. using thumbnails and slides indexes, etc. Good luck.
I'm building a slideshow in jQuery that allows the user to see four images, and page through them, forwards and backwards by appending a new div with the image to the bottom via .load, and then hiding the top div. I'm very new to programming.
I'm having trouble working out a selector to allows the user to go "back" showing the next hidden div, after the first shown div, and hiding the last showing div - faux code example below.
<div class="slideShow" >image one (display = none)</div>
<div class="slideShow" >image two (display = none)</div>
<div class="slideShow" >image three </div>
<div class="slideShow" >image four </div>
<div class="slideShow" >image five </div>
<div class="slideShow">image six </div>
<a href="#" class="scrollUp" >Scrollup</a>
<a href="#" class="scrollDown" >ScrollDown</a>
Jquery to load a new image and attach to the bottom, and hide the first div currently displaying.
$('.scrollDown').click(function() {
$('.slideShow:last').after('<div class="slideShow"></div>'); // add a new div to the bottom.
$('.appendMe:last').load('myimagescript.py'); // load in the image to the new div.
// here I need to find a way of selecting in this example the first shown image (image three) and applying a .slideUp(); to it
});
Jquery to allows the user to go back to an image that they have previously seen and hide the last shown div at the bottom
$('.scrollUp').click(function() {
// here I need to find a way of selecting in this example the first hidden div (image two) after the first shown div (image three) and applying a slideDown(); to it.
$('.slideShow:last').slideUp(); // hide the last image on the page - trouble is what happens if they user now clicks scrollDown - how do I reshow this div rather than just loading a new one?
});
I dont quite understand correctly, however this info may help...you need to match the first visible div then use .prevAll() and filter to get the hidden sibling
$('div.slideShow:visible:first').prevAll(':hidden:first').slideDown();
I've spent hours today on this site trying to do something very similar to what was posted in this question.
What I have is Previous | Next links navigation doing through a series of divs, hiding and showing.
Though what I ended up with was different than the answer here....this was the one that most got me where I needed to be.
So, thanks.
And in case anyone is interested, here's what I did:
<script language="javascript">
$(function() {
$("#firstPanel").show();
});
$(function(){
$(".nextButton").click(function () {
$(".panel:visible").next(".panel:hidden").show().prev(".panel:visible").hide();
});
});
$(function(){
$(".backButton").click(function () {
$(".panel:visible").prev(".panel:hidden").show().next(".panel:visible").hide();
});
});
</script>
<style type="text/css">
.defaultHidden { display: none; }
.navigation { display: block; width: 700px; text-align: center; }
#contentWrapper { margin-top: 20px !important; width: 700px; }
.nextButton { cursor: pointer; }
.backButton { cursor: pointer; }
</style>
<div class="navigation">
<span class="backButton"><< Previous</span> | <span class="nextButton">Next >></span></button>
</div>
<div id="contentWrapper">
<div id="firstPanel" class="panel defaultHidden">
<img src="images/quiz/Slide1.jpg" width="640" />
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel" style="display: none;">
<img src="images/quiz/Slide4.jpg" width="640" />
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel defaultHidden">
<img src="images/quiz/Slide6.jpg" width="640" />
</div>
Repeat ad naseum...
</div>
a shot in the dark but...
selecting the first shown div and sliding it up
$('.slideShow:visible:first').slideUp();
selecting the first hidden div after the first shown div and sliding it down...
$('.slideShow:visible:first').next('.slideShow:hidden').slideDown()
psuedo selectors FTW!
Something like the following should do the trick
$(function() {
$(".scrollUp").click(function() {
//Check if any previous click animations are still running
if ($("div.slideShow:animated").length > 0) return;
//Get the first visible div
var firstVisibleDiv = $("div.slideShow:visible:first");
//Get the first hidden element before the first available div
var hiddenDiv = firstVisibleDiv.prev("div.slideShow");
if (hiddenDiv.length === 0) return; //Hit the top so early escape
$("div.slideShow:visible:last").slideUp();
hiddenDiv.slideDown();
});
$(".scrollDown").click(function() {
if ($("div.slideShow:animated").length > 0) return;
var lastVisibleDiv = $("div.slideShow:visible:last");
if (lastVisibleDiv.next("div.slideShow").length === 0) {
//No next element load in content (or AJAX it in)
$("<div>").addClass("slideShow")
.css("display", "none")
.text("Dummy")
.insertAfter(lastVisibleDiv);
}
$("div.slideShow:visible:first").slideUp();
lastVisibleDiv.next().slideDown();
});
});
Only thing that this solution does is check if an element that was previously invisible is now being animated. This solves some of the problems regarding multiple clicks of the links that occur before the animations have completed. If using AJAX you'd have to do something similar (e.g. turn a global variable on / off - or just disable the scroll down link) to avoid multiple requests being made to the server at once...