Develop Reference

Play video in image/video gallery in JS or jQuery on large image click

I found many helpful sites for image gallery with JS/jQuery but not much with video in gallery.
I need help with playing video as part of the image gallery, once you click on a large image (NOT click on thumbnail) play video.
For example, this site already has full code for image gallery.
I just need to add the video at the end of the gallery to play video.
http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm
http://www.designchemical.com/blog/index.php/jquery/jquery-image-swap-gallery/
$(document).ready(function() {
// Image swap on hover
$("#gallery li img").hover(function(){
$('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});
// Image preload
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
#gallery li {
display: inline;
margin-right: 3px;
}
#gallery #main-img {
background: url(images/bg_img.png) no-repeat 0 0;
padding: 26px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="gallery">
<img src="images/gallery/img_1.jpg" alt="" id="main-img" />
<ul>
<li><img src="images/gallery/thumb/img_1.jpg" alt="" /></li>
<li><img src="images/gallery/thumb/img_3.jpg" alt="" /></li>
<li><img src="images/gallery/thumb/img_4.jpg" alt="" /></li>
<li><img src="images/gallery/thumb/img_5.jpg" alt="" /></li>
<li><img src="images/gallery/thumb/img_6.jpg" alt="" /></li>
<li><img src="images/gallery/thumb/img_7.jpg" alt="" data-video="www.video.com?videoparameters_autoplay="1" "/></li>
</ul>
</div>
Would I add data attribute to last image I want the video to be?
$('.gallery,image7 only').click(function() {
var playVideo = '';
$('.video').hide();
});
call function to click on image 7 to play video,
if image 6 then hide, etc. Hope this makes sense.

call function to click on image 7 to play video, if image 6 then hide, etc. Hope this makes sense.
Sorry, it doesn't make sense. If I understand what you are trying to do is make the #main-img a video when the last image is clicked on. Earlier I think you said:
I need help with playing video as part of the image gallery, once you click on a large image (NOT click on thumbnail) play video.
Isn't image 7 a thumb? Well if this demo doesn't behave exactly the way you wanted, I'm sure this'll help you in the right direction.
The list of changes are:
Added a video element #vid next to the #main-img with the class.hide
The last image #vidImg has a delegated click event that when triggered will toggleClass .hide on #vid and #main-img so now if one exists, the other one doesn't.
SNIPPET
$(document).ready(function() {
// Image swap on hover
$("#gallery li img").hover(function() {
$('#main-img').attr('src', $(this).attr('src').replace('thumb/', ''));
});
// Image preload
var imgSwap = [];
$("#gallery li img").each(function() {
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function() {
$('<img/>')[0].src = this;
});
}
$("#vidImg").on('click', function() {
$('#vid').toggleClass('hide');
$('#main-img').toggleClass('hide');
});
#gallery li {
display: inline;
margin-right: 3px;
width: 100px;
height: 75px;
}
#gallery #main-img {
background: url(images/bg_img.png) no-repeat 0 0;
padding: 26px;
}
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="gallery">
<img src="http://placehold.it/200x150/000/fff?text=0" alt="" id="main-img" />
<video id="vid" class="hide" poster="http://placehold.it/200x150/fff/000?text=VIDEO" src="http://glpjt.s3.amazonaws.com/so/av/vid1.mp4" width="200" height="150" controls></video>
<ul id="list">
<li>
<img src="http://placehold.it/100x75/000/fff?text=1" alt="" />
</li>
<li>
<img src="http://placehold.it/100x75/fff/000?text=2" alt="" />
</li>
<li>
<img src="http://placehold.it/100x75/000/fff?text=3" alt="" />
</li>
<li>
<img src="http://placehold.it/100x75/fff/000?text=4" alt="" />
</li>
<li>
<img src="http://placehold.it/100x75/000/fff?text=5" alt="" />
</li>
<li>
<img id="vidImg" src="http://placehold.it/100x75/000/fff?text=VIDEO" />
</li>
</ul>
</div>

CSS displaying elements when thumbnails are hovered over

i am attempting to display images when the corresponding thumbnail is hover over using only css and am having trouble with the logic and don't know if it is even possible. i can do it in javascript if absolutely necessary.
Here is my latest attempt.
<div id='img-container' class='grd12'>
<img id='img1' class='slide-images' src='images/10086115704_15ab56a165_o.jpg' alt='1'>
<img id='img2' class='slide-images' src='images/9917938624_0a8778f8b1_o.jpg' alt='2'>
<img id='img3' class='slide-images' src='images/PIA18847.jpg' alt='3'>
<img id='img4' class='slide-images' src='images/sun-large.jpg' alt='4'>
</div>
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb1' class='grd3 thumbnail' src='images/10086115704_e36e457d2b_q.jpg' alt='##'>
<!-- </div>-->
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb2' class='grd3 thumbnail' src='images/9917938624_1ed12deaa2_q.jpg' alt='##'>
<!-- </div>
<div class='grd3 thumbnail'>-->
<img id='thumb3' class='grd3 thumbnail' src='images/PIA18847.jpg' alt='##'>
<!--</div>
<div class='grd3 thumbnail'>-->
<img id='thumb4' class='grd3 thumbnail' src='images/sun-large.jpg' alt='##'>
<!--</div>-->
And the CSS
#img-container{
position:relative;
top:0px;
left:0px;
height:950px;
}
.slide-images{
position:absolute;
top:0px;
left:0px;
}
.thumbnail > img{
margin-left:auto;
margin-right:auto;
display: inherit;
}
img#thumb4:hover ~ #img4>#image4{
display:none;
}

I believe this is possible using CSS alone, however it is not very scaleable and it might end up being easier and more appropriate to use Javascript for this. For example:
img#thumb1:hover ~ #img4>#image4{
display:none;
}
Your selector here is incorrect. The general sibling selector selects only elements after the first match. In this case, your image thumb is after your image, but this selector is looking for an image after an image thumb. This is the opposite of what you have. There is no 'sibling before' selector in CSS.
An easier solution, rather than fiddling around with CSS selectors, would just be to bind each thumbnail to a click event that changes the source of a single image tag each time (or alternatively, scrolls across/fades, whatever animation you're looking for). This way, you save on markup, don't need to worry about positioning as much, and can dynamically generate the image display.
For example, to get the ID of an image, you could bind a click event to each thumbnail and then grab the ID of the image which could stored in a data attribute:
$('.thumbnail').on('hover', function() {
var activeImg = $(this).data('imgid');
// From here, set the main image to have the associated image source
}

This is very possible to achieve with just CSS. The layout of your HTML is what needs to change. In this example:
Each thumbnail and full-size image is placed inside a div container
The full-size image is hidden with opacity: 0;
When the div container is hovered, the full-size image is given opacity: 1 and will fade-in thanks to the transition
z-index: 1 keeps the full-size images above the thumbnails
Full Example
.item {
float: left;
position: relative;
}
img {
display: block;
cursor: pointer;
margin: 5px;
}
.fullsize {
position: absolute;
opacity: 0;
transition: opacity 0.6s;
z-index: 1;
top: 0;
left: 0;
pointer-events: none;
}
.item:hover .fullsize {
opacity: 1;
}
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>

using tabs to do a flash swap

So I have browsed all over, including these posts:
Jquery change image on click
JQuery - how can I change an image src on click of a link
http://www.kirupa.com/forum/showthread.php?301972-Swap-image-on-click-Anyone
and other links as well and I guess I don't understand how it works and can't get it to work.
Here is what I have so far:
HTML:
<div style="width:475px; height:230px; background-color:#c1bfbf;">
<div style="width:450px; height:220px; position:relative; overflow:hidden; float:left;">
<ul style="width:450px; height:220px; list-style:none; padding:0px; border:0px; margin:0px; position:relative; float:left;">
<li id="first" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph2.png" /></li>
<li id="second" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph1.png" /></li>
</ul>
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/2nd.png" />
</div>
<div style="width:25px; height:110px; position:relative; float:left;">
<img src="images/1st.png" />
</div>
</div>
This code works using anchor tags, but the problem is it pulls the page down to the anchor which I don't want. So I moved on to jQuery and image swaps. I've implementing other peoples codes to see if they work and I can't get them to work. I've used this jQuery code:
$(function () {
$('.menulink').click(function () {
$("#bg").attr('src', "images/imagegraph1.png");
return false;
});
});
Matched up with this HTML:
switch me
<img src="images/imagegraph2.png" id="bg" />
And all that happens is the showing of imagegraph2.png and not the switching of imagegraph1.png. Usually when you do and then hit the "=" sign, a list of possible links comes up for your image. When its in Javascript, it doesn't do that, you just put what folder/name of file. So I'm sure I'll get some negative votes here, but I have exhausted all avenue's to get this to work.

Try e.preventDefault();
$(function () {
$('.menulink').click(function (e) {
e.preventDefault();
$("#bg").attr('src', "images/imagegraph1.png");
});
});

Scroll horizontally across image thumbnails and have images pop up on mouse hover

I have written some code in html and css to scroll horizontally across image thumbnails and have them pop up on mouse hover. The problem is that when I can scroll horizontally, then the popped up (enlarged) image on mouse hover is only visible within the div that it is contained in. I would like for it to be visible on top of everything else on the page. But since I created the scroll bar by making the property of the div overflow-x:scroll,you would have to scroll to see the enlarged image if it is larger than the div. When I don't see the overflow-x property to scroll, I can view the enlarged image on top of everything else like I want to but all the other thumbnails are also visible. Here is a code snippet to show what I've done.
HTML
<div id="example1">
<h1>This is an example</h1>
<h2>Car 1</h2>
<div class="scroll">
<div id="example1_car1">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span> <img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span><img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car1-->
</div><!--example1_scroll-->
<h2>Car 2</h2>
<div class="scroll">
<div id="example1_car2">
<a class="thumb" href="#"><img src="car1.jpg" alt="car1" height="200" width="251"><span><img src="car1.jpg" alt="car1"></span></a>
<a class="thumb" href="#"><img src="car2.jpg" alt="car2" height="200" width="251"><span><img src="car2.jpg" alt="car2"></span></a>
<a class="thumb" href="#"><img src="car3.jpg" alt="car3" height="200" width="251"><span> <img src="car3.jpg" alt="car3"></span></a>
</div><!--example1_car2-->
</div><!--example2_scroll-->
</div><!--example1-->
CSS
#example1_car1,#example1_car2,.scroll{
position:relative;
}
#example1_car1, #example1_car2
{
width:2400px;
height:200px;
z-index:0
}
.scroll
{
width:800px;
height:210px;
overflow-x:scroll;
z-index:0;
}
.thumb img {
border:1px solid #000;
margin:3px;
float:left;
zindex:-1;
}
.thumb span {
position: relative;/*absolute;*/
display:none;
}
.thumb:hover, .thumb:hover span {
display:inline;
top:0; left: 0px;
/*z-index:1;*/
z-index:10;
}
Any help would be much appreciated.

To make the enlarged image appear on top of/outside of the scrollable region, it will have to actually be outside of it.
To make the enlarged image appear outside, when hovering over a thumbnail that is inside of the scrollable region, you will need to use JavaScript on top of your HTML and CSS.
Here's an example on jsfiddle, in which I haven't changed your HTML structure. Instead I used jQuery to clone the enlarged image outside of the scrollable region and append it to the #example1 div, when you hover over a thumbnail.
JavaScript portion:
$('.thumb').hover(
function(){
var thumb = $(this).children('img');
var large = $(this).find('span>img').clone();
$('#example1').append(large);
large.addClass('enlargedImg');
large.css({
'top': thumb.offset().top,
'left': thumb.offset().left
});
},
function(){
$('.enlargedImg').remove();
}
);
I used the thumb image's offset() values to position the enlarged image directly on top of it. You'll probably want to move it a bit but hopefully this is enough to get you started.

JavaScript Visibility Blinking Out

I am programming an image viewer box which overlays a thumbnail gallery page. The image viewer is set to become visible when the user clicks on a thumbnail.
Currently, when a thumb is clicked, the viewer pops into visibility and then immediately becomes invisible again. I would like to know how to invoke the viewer to full visibility and then keep it there.
I am using an external .js file.
The onclick event:
<div class="thumb_box">
<a href="" alt="gallery thumb" onclick="invokeViewer()">
<img class="thumbnail" src="../thumbs/jacob/jacob1.png" />
</a>
</div>
The JavaScript function:
function invokeViewer(){
var viewerBack = document.getElementById('imagebox_foreground');
var viewerFore = document.getElementById('imagebox_background');
var currentImage = document.getElementById('current_image');
viewerBack.style.visibility='visible';
viewerFore.style.visibility='visible';
currentImage.style.visibility='visible';
return false;
}
The Viewer Div's HTML:
<div id="imagebox_foreground" style="visibility:hidden">
<img id="current_image" style="visibility:hidden" src="imageurl.jpg" />
</div>
<div id="imagebox_background" style="visibility:hidden"></div>
The Viewer Div's CSS
#imagebox_foreground{
position:absolute;
left:50%; top:50%;
height:570px; width:880px;
margin-left:-430px; margin-top:-285px;
background-color:transparent;
z-index:992;
}
#imagebox_background{
position:absolute; left:50%; top:50%;
height:570px; width:880px;
margin-left:-430px; margin-top:-285px;
background-color:black;
border-right:solid 4px rgb(40,40,40); border-left:solid 4px rgb(40,40,40);
opacity:.85; filter:alpha(opacity=85);
z-index:991;
}
#current_image{
display:block;
margin-right:auto;
margin-left:auto;
margin-top:10px;
}

I suspect your href is being triggered and your page is being reloaded. Add return false to your event handler to prevent the link from being triggered. invokeViewer() is already returning false, so you can just say return invokeViewer():
<a href="" alt="gallery thumb" onclick="return invokeViewer()">
Or:
<a href="" alt="gallery thumb" onclick="invokeViewer(); return false;">