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>
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
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.
I am trying to work out how to make a custom lightbox type thing (I'm making an image gallery / video player which will sit inside a template) for my website but can't seem to work out. How I can make a whole div clickable.
I've tried using an anchor wrapped around the div but that still won't make the div display.
A live version of the page / website which contains the full html can be found here -
http://mosesmartin.co.uk/digitalguys/ford.php#
the HTML -
<a onclick="showdiv('imagepopup');" href="#">
<div class="rectanglewrap">
<div class="rectangleimg" id="fordengine">
<div class="rectangleimginfo">
<h3 class="imageinfo">Story in Pictures</h3>
</div>
</div>
</div>
</a>
CSS
#imagepopup {
visibility: hidden;
position:absolute;
height:100%;
width:100%;
background-color: black;
margin-right:0px;
}
And the Jquery / Javascript
function showdiv(Div_id) {
if (false == $(Div_id).is(':visible')) {
$(Div_id).show(250);
}
else {
$(Div_id).hide(250);
}
}
I'm by no means a master at JavaScript so if there's a better way of doing this please let me know.
Thank you
You can make a div clickable in jquery with $("#myDiv").click(function() {dosomething();});
$(function() {
$(".rectanglewrap").click(function() {
$("#imagepopup").toggle(250);
});
});
I have a horizontal menu that is fixed to the top of the page and built by the following list:
<div id="menu">
<ul id="nav">
<li>Home</li>
<li>blog</li>
<li>more info</li>
<li>contact</li>
</ul>
</div>
Currently there is an empty space to the far left of the home menu link. How could I go about having an image of their logo show up in this location after the user scrolls down the page 150px?
I imagine this is a combo of javascript and CSS which is fine, I just need a roadmap of how to achieve the result. Thanks.
Place an element for the logo in the area you want it to be and provide it styling. Set it to display none at first.
Attach a scroll listener to the window. Check for if the page has scrolled 150px from the top. If it has change the display to block on the element with the logo. It if hasn't change the element to display none if it is visible.
You can do it with jQuery, if you'd like. The idea will be to go ahead and add the image, and then use JavaScript to add a class of hidden to the image (the image will be displayed whenever JavaScript is turned off, then), and then with jQuery, add or remove the class hidden depending on the scroll position.
<div id="menu">
<img src="path/to/logo.png" id="logo">
<ul id="nav">
<li>Home</li>
<li>blog</li>
<li>more info</li>
<li>contact</li>
</ul>
</div>
/* CSS */
.hidden {
display: none;
}
// jQuery
$(function() {
var logo = $('#logo');
logo.addClass('hidden');
$(window).scroll(function() {
if( +$(this).scrollTop > 149 ) {
logo.removeClass('hidden');
} else {
logo.addClass('hidden');
}
});
});
Just as a note, if you would like the image to always be hidden if JavaScript is off, then hard-code class="hidden" into the HTML. When JavaScript is turned on, the code will still work the same. It's just a preference of how you want your page to behave with vs without JavaScript being on.
here is a little example how you can show/hide an element on page scroll with jQuery. hope this helps: http://jsfiddle.net/KWyS2/
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
$('.addDistance').html(scrollTop);
if(scrollTop >= 150 ) {
$('.show-hide-me').fadeIn();
} else {
$('.show-hide-me').fadeOut();
}
})
})
</script>
<div class="show-hide-me"></div>
<div class="content"></div>
<p class="addDistance"></p>
<style text="type/css">
.show-hide-me {
display:none;
width:100px;height:100px;
background-color:orange;
position:fixed;
top:0px;
left:0px;
}
.content {
height:10000px;
background-color:fuchsia;
width:10px;
}
p {
position:fixed;
top:0px;right:0px;
border:solid 1px red;
}
</style>
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...