We Keep Coding

How to stop lightbox from advancing to next gallery?

I am totally new to js and stuff like that, but I was made an admin and editor of an existing webpage of my employer. The problem is, I cannot contact a man, who has written the webpage, so its sometimes pretty hard to find out the paths and solutions of problems.
The problem I want to solve is on the page using Lightbox for image gallery. When you click on the first image, it pops out and works brilliant. But when you come to the end of the gallery, you can continue to the next car.
Here is the link to show what I mean: http://bmw-groupm.sk/vozidla-na-sklade/
Can you please at least try to tell me, if the problem is in CSS or script itself? Thank you.
It is not that simple. Cars are added to the webpage by separate Admin panel, which creates a directory on server, puts the images inside and than the car content is called by some complex process. See the html:
$adresar[$cislo] = opendir("vehicles/".$cisl[$cislo]."/");
while ($subor[$cislo] = readdir($adresar[$cislo])){
if ($subor[$cislo]!="." && $subor[$cislo]!=".." && !is_dir($subor[$cislo]) && $subor[$cislo]!="t" && $subor[$cislo]!="tn" && $subor[$cislo]!="mcith") {
$ext[$cislo] = pathinfo($subor[$cislo], PATHINFO_EXTENSION);
$ext[$cislo] = strtolower($ext[$cislo]);
if ($ext[$cislo]!="pdf") {
list($w[$cislo], $h[$cislo], $type[$cislo], $attr[$cislo]) = getimagesize("vehicles/".$cisl[$cislo]."/".$subor[$cislo]);
if ($w[$cislo]<$h[$cislo]) {
$iclass="imgh";
}
else {
$iclass="imgw";
}
$pas[$cislo].='<a rel="group" href="/vehicles/'.$cisl[$cislo].'/'.$subor[$cislo].'"><img src="/vehicles/'.$cisl[$cislo].'/'.$subor[$cislo].'"></a>';
} else {
$docu[$cislo]="/vehicles/".$cisl[$cislo]."/".$subor[$cislo];
}
}
}

The images are placed in links, which have the same rel="group" attribute.
Change these such that each car/gallery group of images has a different value from the next.
For example, car 1 gallery images will be rel="group1", and car 2 images will berel="group2".

You have to create an image set and give a specific name. The details are found here in the official website.
Documentation

You have to create an image set and give a specific name. You can provide the name in the data-lightbox attribute. You can find an example with dummy image links below.
<p>Gallery One</p>
<a href="https://dummyimage.com/600x400/b0a4b0/ffffff" data-lightbox="car">
<img src="https://dummyimage.com/600x400/b0a4b0/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/ff00ff/ffffff" data-lightbox="car">
<img src="https://dummyimage.com/600x400/ff00ff/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/ed1520/ffffff" data-lightbox="car">
<img src="https://dummyimage.com/600x400/ed1520/ffffff" />
</a>
<p>Gallery Two</p>
<a href="https://dummyimage.com/600x400/17a621/ffffff" data-lightbox="jeep">
<img src="https://dummyimage.com/600x400/17a621/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/0e2796/ffffff" data-lightbox="jeep">
<img src="https://dummyimage.com/600x400/0e2796/ffffff" />
</a>
<a href="https://dummyimage.com/600x400/616011/ffffff" data-lightbox="jeep">
<img src="https://dummyimage.com/600x400/616011/ffffff" />
</a>
The details are found here on the official website.

Reload specific div

I want to display a sequence of images on a webpage.
The website is static with no server side language.
Is there a way to have the website load kind of like this img1, img2, img3 and so on after a click while not reloading the entire page.
I am pretty new to html and css but willing to do some reading about JavaScript if necessary.
The point is to have the site load as little as possible.So any other tips would be greatly appreciated.
Bonus if there are any other website optimizations I am not thinking of.

Although you have an accepted answer but here's what you were looking for exactly REPLACING THE DIV ON CLICK
HTML
<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
<img id="img1" src="">
</div>
jQuery
$( document ).ready(function() {
var check=0;
$('#btn1').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$("#img1").attr('src', 'url1');
check++;
} else {
if(check==0){
$("#img1").attr('src', 'url2');
}else{ $("#img1").attr('src', 'url3');}
}
$(this).data("clicks", !clicks);
});
});
Working DEMO

You can create image tags in your HTML with an empty src attribute:
<img src="" id="image-1">
<img src="" id="image-2">
<img src="" id="image-3">
Load image 1
Load image 2
Load image 3
Then, via JavaScript, you can listen for a click event on each link, and populate the src of each image:
document.getElementById('but-1').on("click", function(){
document.getElementById("image-1").src="path/to/image.jpg";
})
document.getElementById('but-2').on("click", function(){
document.getElementById("image-2").src="path/to/second-image.jpg";
})
//... and so on
That way, each time a link is clicked, each respective image will load.

Vimeo Gallery - separate title div - to change dynamically

Hi I am trying to build a gallery of videos on our website, and I have already done 90% of it, using the help from the following topic
Javascript Vimeo Gallery Basics
<div class="vimeo-container">
<iframe id="vplayer"
src="http://player.vimeo.com/video/.." frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div><!--vimeo-container-->
<div id="vplayer_title">
<p>INSERT VIMEO VIDEO TITLE HERE FOR EACH VIDEO<p>
</div><!--vplayer_title-->
<div class="bucketthumbs">
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_1.jpg">
<div class="title_bucket" id="thumb1_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_2.jpg">
<div class="title_bucket" id="thumb2_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
<a class="video-thumbnail" href="http://player.vimeo.com/video/.." video-uri="http://player.vimeo.com/video/..">
<div class="bucket">
<img class="gt_orrery" src="images/thumb_3.jpg">
<div class="title_bucket" id="thumb3_title">
<p>VIDEO TITLE HERE FOR THIS VIDEO<p>
</div><!--title_bucket-->
</div><!--bucket1-->
</a>
</div><!--bucketthumbs-->
This is my html. Using the above topic. I am successfully able to target the thumbnails to change the video in the iframe.
<script>
$(function() {
// Add an event listener to the click event for each of your thumbnails
$('.video-thumbnail').click(function(e) {
// changes src of the iframe to the one we stored in the clicked thumbnail
$('#vplayer').get(0).src = this.getAttribute('video-uri');
// stops default browser behaviour of loading a new page
e.preventDefault();
});
});
</script>
But I dont want to use the title that vimeo has on the video.
Instead I want to display it below the main video and have it change with the video, pulling the titles from vimeo.
I am only a front end developer and my knowledge of javascript and API is extremely limited. I tried to use the same code to get the titles to change too but since that uses src, and attribute i dont think i know how to make it work.
Could someone pls help!? :(
I believe Vimeo has oEmbed that can make it easier. But I cant really understand much of the API, its too basic for me, If its too complicated to solve this issue by using vimeo video titles, a second aleternative would be for me to manually enter the titles on the respect bucket divs, all i need to know is how to dynamically change the title in the main vplayer_title div

You might want to use the player's JS API: https://developer.vimeo.com/player/js-api
Something like this in your thumbnail click event:
var player = $f(iframe);
player.addEvent('ready', function() {
player.api('getVideoTitle', function(title) {
// set the title contents here
$('#vplayer_title').html('<p>' + title + '</p>');
});
});

how to prevent fancybox from deleting the clicked thumbnail

Fist time using fancybox and it's not going so well.. starting to wish I didn't bother with it.
I have some thumbnails in a row, fine, then when I click one it opens the THUMBNAIL instead of the link whats worse it DELETES the thumbnail from the DOM. I've dug around in the fancybox src for the issue but there's a lot of it and I'll probably end up killing functionality so I thought I'd post here.
heres the code:
The raw HTML comes from CMS looking like:
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
I then run some stuff in backbone view render, the important bit is this:
var imgs = this.$el.find("img"); //:a jquery group of the img elements above
this.content = this.$el.find("span.postcontent");
//empty current
this.content.empty();
//make replacement
for(i= 0;i<imgs.length;i++)
{
var curImg = $(imgs[i]);
var curLink = $("<a/>");
curLink.attr("href",curImg.attr('data-orig'))
curLink.append(curImg);
curLink.on("click",function(e){
e.preventDefault();
$.fancybox.open(imgs)
});
this.content.append(curLink)
}
I now have rendered html like this:
<a href="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
So far so good... now, when I click the link/thumb it does the fancybox thinggy but shows the THUMBNAIL not the linked image, tiny in the middle in it's lightboxy thing and whats really annoying is that the clicked thumbnail in the page itself has now been completely removed from the dom ie.:
<a href="http://blah..blah..flickr..big..001_b.jpg">
///THIS IS MISSING COMPLETELY..... ggggggrrrrr
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>

I've never seen Fancybox used like that. Normally, you don't need to trigger $.fancybox.open like that. You can just bind fancybox() to the <a> tags.
HTML:
<a href="big-image.jpg" class="fancybox">
<img src="thumbnail.jpg">
</a>
JavaScript:
$('.fancybox').fancybox();
Try just using that function after you've got the DOM to look like that.
[edit]
I couldn't get your DOM manipulation to quite work, but I tested with this fiddle, and it seems to be working: http://jsfiddle.net/haRnQ/4/
NOTE: I didn't import the styles or images for the demo, so it will be unstyled, but it still works.

I'm answering and voting up the previous two because they both helped but were not the definitive answer. The documentation was not clear that if you use only the "group" as a jquery array you must also specify options therefore the correnct answer is to do this (passing two arguments):
$.fancybox.open(imgs,
{
href:this.href,
title:curImg.attr("title")
}
);

Try changing this
$.fancybox.open(imgs)
by this
$.fancybox({
href: this.href
});
because imgs is the collection of your thumbnails (all <img> elements), which are moved to fancybox on click but not moved back after close.
In any case I would recommend you to add a class to <a> otherwise any other anchor you may have in your page would try to open fancybox.

I believe Fancybox prefers wrapping your images in an anchor. This is important to note as Fancybox removes the anchor when activating a slide show to prevent clicking on the anchor when the modal is active.
Calling FB from the thumb behaves like you have experienced by deleting the thumb and not recovering it after the modal is closed.
This is my typical FB setup (not a thumb gallery):
<img src="image1.jpg" alt="" />
<div style="display: none">
...
</div>

How Call link tag by id by javascript?

<img src="images/icon2.png" border=0 onClick="window.document.getElementById('loadimg')">
<a href="images/img.jpg" id='loadimg'></a>
i want when click the image will active the link by id='loadimg'
how can i do i try write onClick="window.document.getElementById('loadimg')" but not work
Than you

You can put the image in the link:
<a href="images/img.jpg" id='loadimg'>
<img src="images/icon2.png" border="0" />
</a>

It seems you want the item in the link to be loaded so something like this should work:
window.location.href = window.document.getElementById('loadimg').href;
This will cause the broswer page to navigate to this url.
Or was there something else you wanted to do?