Photoset-grid + lighbox opens wrong image on click - javascript

I'm using Stylehatch's 'Photoset-grid.js' and 'view.js'
It seems to work, aside for this fact: When I click on the right-most image in a multi-image row, it opens the left image.
To see what I mean: http://test-theme-one.tumblr.com/
My rendered HTML looks like this (I went to safari and clicked "inspect element", and copied the html for a photoset post on my test blog) I don't understand how it is setup, I though I had it so an anchor would wrap each image in the photoset?
<div class="photoset-grid" data-layout="3" style="width: 100%;" data-width="500">
<a href="http://31.media.tumblr.com/4738e9e1fe4f307b7c7313bcf96766a6/tumblr_msk013TnG61syxzvzo2_500.png" class="view" rel="60178651810" title="help">
<div class="photoset-row cols-3" style="clear: left;display: block;overflow: hidden;height: 80px;">
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-right: 2.5px;">
<img src="http://31.media.tumblr.com/4738e9e1fe4f307b7c7313bcf96766a6/tumblr_msk013TnG61syxzvzo2_500.png" alt="" style="width: 100%;height: auto;margin-top: 0px;">
</div>
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-right: 2.5px;padding-left: 2.5px;">
<img src="http://31.media.tumblr.com/b421d5cbc68a1f63091492cc95cf879e/tumblr_msk013TnG61syxzvzo3_500.jpg" alt="" style="width: 100%;height: auto;margin-top: -84.5px;">
</div>
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-left: 2.5px;">
<img src="http://25.media.tumblr.com/2a4e3311cad4a928b49460b9ed6fda1e/tumblr_msk013TnG61syxzvzo1_500.png" alt="" style="width: 100%;height: auto;margin-top: 0px;">
</div>
</div>
</a>
</div>

The problem is that Photoset Grid wasn't really designed for template work. It takes this template:
{block:Photos}
<a href="{PhotoURL-500}" class="view" rel="{PostID}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
</a>
{/block:Photos}
And pulls out all <img> tags and duplicates them--one per image in the row. It results in this HTML:
<a class="view" ... >
<div class="photoset-row cols-3" ...>
<div class="photoset-cell" ...>
<img ...>
</div>
<div class="photoset-cell" ...>
<img ...>
</div>
<div class="photoset-cell" ...>
<img ...>
</div>
</div>
</a>
<a class="view" ... ></a>
<a class="view" ... ></a>
Now, view.js is using anchors/links to pop open the lightbox. They are basically capturing the click event for the entire grouping. When, in your template, you attempt to wrap the <img> in an <a>, it is pulling out the <img> tag out of the <a> in the template and appending them to the first <a>.
If you're up on jQuery plugin development, the Photoset-grid code, is pretty clearly bugged around line 113 (_setupColumns).
Long story short, you're not going to be able to use view.js lightbox with the Photoset-grid. Unless some kind soul comes along and fixes the plugin.

Related

Creating a scrolling page without a plug-in. No scroll effect

I'm trying to create a one page scrolling site without using a plugin. Following this tutorial https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2
The links work but there is no scrolling effect, it just jumps to the section.
JS
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});
HTML (updated to remove errors)
<div id="container">
<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>
<div id="page1">
<a id="welcome"></a>
<h1></h1>
<div id="welcome_squares">
<div class="quarter-column">
<h3></h3>
<p></p>
</div>
<div class="quarter-column">
<a href="#info">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#events">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#contact">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="full-column" id="tiles">
<a id="info"></a>
//CONTENT
</div>
<div class="full-column" id="tiles">
<a id="events"></a>
//CONTENT
</div>
<div id="contact">
<a id="contact"></a>
</div>
</div>
Hey here's the Fiddle which is working.
https://jsfiddle.net/fj1dfcsr/2/
Errors I've encountered.
<div id="container">
<div class="banner">
<a class="button" href="#welcome"><h2 style="text-align: center;"></h2></a>
</div>
<div id="page1">
<a id="welcome" href="#"></a>
<h1></h1>
<div id="welcome_squares">
<div class="quarter-column">
<h3></h3>
<p></p>
</div>
<div class="quarter-column">
<a href="#info">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#events">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
<div class="quarter-column">
<a href="#contact">
<div class="welcome_square">
<img src="/pageassets/" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="full-column" id="tiles">
<a id="info" href="#">INfo</a> //Here, you have used </div> instead of </a>
</div>
<div class="full-column" id="tiles">
<a id="events" href="#"></a> //Here also, you have used </div> instead of </a>
</div>
<div id="contact">
</div>
</div>
Few things you should keep in mind that you are calling a particular div whose id you know.
For example
<div id="home"></div>
then you'll have to use Home
not <a id="#home"> Home </a> //Wrong way
There are a lot of mistakes in the code you presented,so it's hard to tell what your original problem was. Here's a working fiddle based on your example.
https://jsfiddle.net/1dqhqpet/1/
I used the id attribute on anchors you place in the document to identify the location of a field you want to "go to". I also didn't put the content inside the anchor tags, because that is not how you do that normally. The anchor tag is a marker. But I don't see why that would be too much of a problem (although with the href on the anchor tag that would turn the whole text into a link). As you can see, since I didn't have access to your images I put some filler content in so you can see it scroll, but again, that shouldn't really affect anything.
It's likely your problem is not in the code you presented.
Some further notes on your code:
I know it was copy pasted, but you have an extra </div> after each //Content comment which makes it not working HTML
Your anchors that are used to identify the location of portions of the document don't need href attributes either. All they need is id. So
<a id="welcome" href="#"></a>
in your example becomes
<a id="welcome"></a>
Note that the content shouldn't go in the anchor tag either. It should go under it. The anchor is just like a bookmark to identify a portion of the page.
Based on how this works, the JQuery is only there to provide "smooth" scrolling. It works just fine without it.

Not able to perform any event after image click?

This is my code which is getting dynamically appended by a plugin
<div class="emoji-menu" style="top: 913px; left: 1211.5px; display: block;">
<div class="emoji-items-wrap1">
<div class="emoji-items-wrap nano mobile_scrollable_wrap has-scrollbar">
<div class="emoji-items nano-content" tabindex="-1" style="right: -17px;">
<a href="javascript:void(0)" title=":unamused:">
<img src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -360px 0px no-repeat;background-size:540px 140px;" alt=":unamused:">
<span class="label">:unamused:</span>
</a>
<a href="javascript:void(0)" title=":joy:">
<img src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -440px 0px no-repeat;background-size:540px 140px;" alt=":joy:">
<span class="label">:joy:</span>
</a>
</div>
</div>
</div>
</div>
The problem is that i need to change .emoji-menu's div property to display:none whenever the img tag inside it gets clicked(please refer the code), I have tried with different selectors but it didn't work.
I think <a href="javascript:void(0)" is causing problem. Please help me on this.
With angular you can use ngClick and ngShow for these things:
<div ng-show="thisEmoji" class="emoji-menu" style="top: 913px; left: 1211.5px; display: block;">
<div class="emoji-items-wrap1">
<div class="emoji-items-wrap nano mobile_scrollable_wrap has-scrollbar">
<div class="emoji-items nano-content" tabindex="-1" style="right: -17px;">
<img ng-click="thisEmoji = true" src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -360px 0px no-repeat;background-size:540px 140px;" alt=":unamused:">
<span class="label">:unamused:</span>
<img ng-click="thisEmoji = true" src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -440px 0px no-repeat;background-size:540px 140px;" alt=":joy:">
<span class="label">:joy:</span>
</div>
</div>
</div>
</div>
The a tag could be replaced with removed as it only ads a title to the element. I seem to rememeber the alt attribute on img does the same.
If your html snippet appends the document dynamically, you should bind the click events of images . Hope this helps
$("body").on("click",".emoji-items img",function(){
$(".emoji-menu").fadeOut();
})

Prevent click on link wrapper using css

I have link with image in it. This all construction is wraped in some divs. Problem : except image, also is clickable area of div-wrapper. I don't know why it is possible. So i want to prevent this behaviour. Now i can just do this with javascript (return false on div click) and with css (change curson type on div hover).
Can i somehow done this just with css?
Thanks.
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
JsFiddle Example
For those who don't know what i'm asking : I want to make clickable area that are limited by sides of image. Now i can click on div that are wrapper of image to be redirected by link.
Since you're using Bootstrap and the img-responsive class makes an image a block element, you need to change that behavior. Block elements take up the full width of their parent container. You can fix that by making the image an inline element:
img.img-responsive {
display:inline;
}
jsFiddle example
Or just don't use the img-responsive class.
pointer-event:none;
Ya, you can do this using CSS :)
pointer-event:none;
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap" class='no-link'>
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/>
</a><br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
<style>
.no-link{
}
</style>
Based on your jsFiddle example, simply change yor code to:
<div style="white-space: nowrap; width:200px; margin: auto;">
The cause of the "side effect" is because your A TAG is taking all the parent DIV area, thus the DIV itself is taking the whole space of its own Parent, making it appears as if the clickable area is stretching beyond of the A TAG (which is not true).
To prevent such behavior it is always a good practice to limit the size of the container to the size of the clickable element inside it (width AND height, whenever necessary).
Have a good coding day! :)
You should use display: inline-block; and set the width of the containing div.
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center" style="width: 100%; margin-left:auto; margin-right: auto;">
<div style="white-space: nowrap; display: inline-block; width: 200px;">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0" />
</a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
just Add same margin and width in div also
--example
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap;margin: 0 auto; width: 200px;">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>

Fancybox: Next and previous image within different DIVs?

The HTML structure looks like this:
<div id="gallery" class="container">
<div class="thumbs-holder">
<div class="thumbs-center-area">
<div class="thumb-back">
<a class="fancybox" href="images/image1.jpg">
<img class="thumb" src="images/thumbnails/image1.jpg" title="Image 1" />
</a>
</div>
</div>
</div>
<div class="thumbs-holder">
<div class="thumbs-center-area">
<div class="thumb-back">
<a class="fancybox" href="images/image2.jpg">
<img class="thumb" src="images/thumbnails/image2.jpg" title="Image 2" />
</a>
</div>
</div>
</div>
...
</div>
With the code above, when I click the thumbnail, it opens lightbox image (fancybox), but can't get the "next" and "prev" buttons in the lightbox to get the image from next div. It shows only the image from one div.
How can I make fancybox "prev" and "next" works with HTML structure like this?

Fancybox looping through multiple albums

I found this question unanswered in Google Groups and I'm facing the same bug in Fancybox.
I have more image galleries on one page. When I go to the next image
with the next prev buttons, and so on, I'll get to the images from the
other gallery.
With lightbox it's possible to do something like:
<a href="url" rel="fancybox[gallery1]" >link</a>
and I'll get all the images from
gallery1 in an image gallery. My albums are dynamic so I can't do it
in my javascript file.
Is this possible?
How would we control this navigation?
<div class="Album" />
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery0">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a>
</div>
<div id="Gallery0">
<a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
<div class="AlbumImg">
<a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a>
<div id="Gallery1">
<a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a>
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a>
</div>
<div id="Gallery1">
<a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a>
</div>
<img class="first" src="Tokyo" title="Tokyo" />
</a>
</div>
This is the code I have where every album holds a number of images. When i hit the last image of the first album and navigate next I get to the first pic of the second album. But I want to cycle back to the first image of the same abum
The code you pasted contains a lot of errors...
You have multiple div's with the same id, and the attributes aren't contained within the quotes, in both <div class="AlbumImg"> there are a unmatched closing tag </a>. I'm not so sure that any of this matters for your example but you should definitely look in to it. And as Ruben said fancybox should work with the rel attribute as well, just like lightbox.
Your code should look something like this:
<div class="albums">
<div class="gallery1">
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery1">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
<div class="gallery2">
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
<a href="http://placehold.it/350x150.png" rel="gallery2">
<img alt="" src="http://placehold.it/150x150.png"/>
</a>
</div>
</div>
And if you want your galleries to cycle you have to pass a parameter to fancybox. See the documentation. Should look like this:
$(document).ready(function() {
$('a').fancybox({
'cyclic':true
});
});
<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg">
this should work? don't forget the '-'
if it doenst work, can you provide the jquery code?

Categories