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>
Related
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.
I just want my page to contain one image then once you click it.. you can move across and view more images.. is this possible?
Atm my fancy box is just one image showing one image..
Any help would be great, thanks
I use to work with Fancybox since earlier versions. What I do in that case is:
HTML:
<!-- this is the regular image -->
<a class="fancybox" href="leIMG-bigger-0.jpg" rel="leGallery"><img src="leIMG-0.jpg" alt=""></a>
<!-- this is the rest of the gallery... hidden -->
<div class="fancyboxHidden">
<a class="fancybox" href="otherIMG-bigger-1.jpg" rel="leGallery">
<img src="otherIMG-1.jpg" alt="">
</a>
<a class="fancybox" href="otherIMG-bigger-2.jpg" rel="leGallery">
<img src="otherIMG-2.jpg" alt="">
</a>
<a class="fancybox" href="otherIMG-bigger-3.jpg" rel="leGallery">
<img src="otherIMG-3.jpg" alt="">
</a>
<div>
CSS:
.fancyboxHidden {display:none;}
This way you are:
1) Using your full gallery (try the thumbs helper and will look great)
2) Indexing all the images for search engines
Hope this will help you, for a good example of this check out this site in source view.
PS: There is many ways to achieve what you want, you can create the gallery directly from JS or combine both ways. This is the way I choose for image indexing ;)
I am trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it...I would also like this div to be pushed down as the box described above expands down.
Any suggestions?
Thank you very much in advance!
C*
Forgot the code that I am using...so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it's quite long and I wasn't sure if I should add that (it was create by Dreamweaver when I created a rollover image).
<div class="images">
<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>
<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>
</div>
You don't give much information in your question about your current setup, but assuming that you have your HTML set out something like this:
<div>
<img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
<div id="tux_desc" class="imgDesc" style="display: none">
<p>A cute penguin!</p>
</div>
</div>
<div>
<p>This text is part of the normal document flow</p>
</div>
Then you can use the following JavaScript (which makes use of jQuery):
$('#tux').hover(
function() {
$('#tux_desc').slideDown();
},
function() {
$('#tux_desc').slideUp();
});
You can see it working here: http://jsfiddle.net/wbAxm/1
something like this ought to to do it as long as the div to expand is directly after the image in the mark-up:
$(".class_for_images").on("mouseenter mouseleave", function() {
var content = $(this).next();
if (content.is(":visible")) {
content.slideUp();
} else {
content.slideDown();
}
});
If you want more than this, or it doesn't work, you'll need to post some code so that we can provide more detailed answers...
<div>
<a id="_a-link" href=""><img src="/local/img/image1.png" alt=""/></a>
</div>
For that image link, I try the following jquery code to change its image source attribute into
<div>
<a id="_a-link" href=""><img src="/local/img/image2.png" alt=""/></a>
</div>
$('#_a-link img').attr('src','');
$('#_a-link img').attr('src','/local/img/image2.png');
However the image displayed after all still is the same; it is image1.png not image2.png;
You have a typo:
$('#_a-link img').attr('src','');
$('#_a-link img').attr({'src':'/local/img/image2.png', 'alt': ''});
Also you're doing it wrong with selectors. AFAIK, "#ID TAGNAME" selectors work pretty long. They will get all the img's and then will walk upstairs the DOM for each one to find some node with ID. You better add some class to needed images or if it's expected to be single use image id.
So the best optimized way is:
<a whatever here><img src="#" class="imgClass" /></a>
$(".imgClass");
The code you posted uses scr; it should be src:
<div><a id="_a-link" href=""><img src="/local/img/image2.png" alt=""/></a>
</div>
$('#_a-link img').attr('src','/local/img/image2.png');
You shouldn't need to blank it first, and the alt should be a separate invokation (if you need to change that too).
EDIT (based on comments below):
Here's a jsFiddle that uses this code: http://jsfiddle.net/h4tf6/
As you can see, it works just fine. If you have problems, there's most likely an error elsewhere in your code.
Try This:
$('#_a-link img').attr("src").replace("/local/img/image1.png", "/local/img/image2.png");
<a href="#anchor1">
<img src="http://www.test.com/images/test/test.png" width="80" height="150" />
</a>
<div id="anchor1">...</div>
When I mouse over test.png I need it to scroll the page to #anchor1 ..help_me
Use Javascript inside the onmouseover event:
<img onmouseover="window.location.hash = 'anchor1'" />
Note that you don't use the '#' character.
Also, you are not naming the anchor correctly. It should be:
<a name="anchor1" .... instead of href.
I'm not sure you're using "anchor" in the generally accepted sense.
the tag is a "anchor" tag that is used to wrap around an image or text link, or now virtually any DOM object it consists of either a href tag, which is it's target, or a name tag in which case it IS a target. so a page with
<a id="part1"/><h3>part 1</h3></a>
and
<img src="..." onMouseover="$.scrollTo('#part1');">
clicking on the image would make the page scroll so that the h3 containing "part1" would be at the top of the page.
to do it with jQuery and mouseOver you'll need to use jQuery scrollTo() then you can define your speed and easing.