I have this type of element:
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="">
</a>
</div>
I want to be able to:
Drag the whole div, even if I click on the /anchorimage (before dragging).
Still respond normally to an anchor/image click (without a drag).
Right now, only the image is dragged when I click on it.
Here's a fiddle: http://jsfiddle.net/M5tBd/
As per the HTML5 Editor's Draft spec, Images and Anchors with a href element are both elements that are, by default draggable. Your anchor is probably capturing the dragstart event, preventing the div from ever getting it. Try setting draggable="false" on your <img> and <a> elements.
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank" draggable="false">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="" draggable="false">
</a>
Your fiddle doesn't even work dragging the img element for me in Chrome under Ubuntu, so you may have other issues besides this.
Related
We upgraded from JSSOR 26.5.2 to 27.5.0, and found that we are no longer able to use "link slides" as described in the JSSOR documentation here:
https://www.jssor.com/development/define-slides-html-code.html
The issue seems to be a DOM change in JSSOR 27. Now there is a new DIV element, the one with data-events=auto and data-display=block, that acts as a kind of "glass" in front of the actual image (the one with u=image). As a result, any ... that surrounds the actual IMG can never be clicked, because the z-index of this "glass" prevents the click on the .
In our case, we've always been using a construct like this:
<a u="image" href="..." style="display: block;">
<img src="..." alt="..."/>
</a>
It's always worked until now. Is this a bug in JSSOR?
Your code is correct.
Anyway, here is an example, hope this helps.
https://www.jssor.com/jssordev/problems/image-slider.slider
https://www.jssor.com/jssordev/problems/image-slider.slider/=edit
The output code is as below,
<a href="#">
<img data-u="image" src="//jssorcdn7.azureedge.net/demos/img/gallery/980x380/004.jpg" />
<div data-t="0" style="position:absolute;top:30px;left:30px;width:500px;height:40px;font-family:Oswald,sans-serif;font-size:32px;font-weight:200;line-height:1.2;text-align:center;background-color:rgba(255,188,5,0.8);">responsive, scale smoothly</div>
</a>
Edit
I got the problem, the new version improved to use <a> element as whole slide.In this manner, you can add anything inside without hiding the link area.
That's to say, as <a> is a slide, you can remove the parent <div> element.
I am using Fancybox gallery with cushyCMS for my client. It will be useful if I can create more main images as a series of photos for particular thumbnail, but in this case I want to hide empty src images so there are no white images when pictures are extended and client doesn`t fill it.
<li>
<div class="wrap">
<a class="fancybox" rel="group1" href="images/GaleryPicSixSM.png">
<img id="thumbnailSix" class="cushycms thumbnail" src="index_15_1769179488.png" caption="thumbnail 6" />
</a>
<img id="mainPicutureSix" class="cushycms main" src="" caption="main image 6">
</div>
</li>
Is there anyway how I can hide automatically empty src in case that client will not find relevant picture ? Unfortunately there is no possibility in cushyCMS for my client to add a more pictures under one thumbnail.
If you can use jQuery, the following code would do the trick:
$('img [src=""]').hide();
I have added a paragraph in the slider.
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
The paragraph is display on top of the image.The slider works fine after finishing loading the whole page. However, when the page is loading, I can see all of the paragraph for each slide show in the same time. I only want it shows the first slide paragraph when loading. Can anyone please help?
You can display only one slide and hide all other slides (by specifying style="display: none;") at the beginning.
<div u="slides" ...>
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
<div style="display: none;">
...
<div>
</div>
Or you can use jssor slider no-jquery version, it will initialize jssor slider immediately without waiting for page load.
I am using the jssor templete for my slider and I have modified the setting so that I can have a slider image change when the mouse hover on the thumbnail. But I do not know how to add an external link to the thumbnail image so that I can go to the another page associated with that picture
I have try the following method from http://quabr.com/28478806/jssor-external-links-on-thumbnails but it is not worked
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Thank you for your help!
I guess it worked already.
But there is an extra enclosing '<div>' in following code,
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Please remove it by replacing
<div u="caption" t="L">My Title</div>
</div>
with
<div u="caption" t="L">My Title</div>
Also, please set 'height: 100%' for 'a' element to make the clickable area bigger.
<a href="http://mylink.com" target="_blank" style="height: 100%;">
And finally, please check out the thumbnail navigator skin html code, because it is fully customizable, and it can be very complicated. Please make sure your link element is not covered by any other element.
I am having a problem using fancybox with expression engine.
Basically I have different galleries set-up using matrix plugin. Each gallery has around 10 images. Basically I want the thumbnail to open up fancybox and fancybox to be able to scroll through the images in that matrix entry/gallery.
Sounds simple but I can’t seem to get fancybox to scroll through the images, it just stays on the first image.
This is my code for the thumbnails:
<ul id="image_gallery">
{exp:channel:entries channel="gallery_images"}
<li>
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}">
{gallery_image limit="1"}
{exp:imgsizer:size src="{image}" width="200px" height="180px"}
<img src="{sized}" width="{width}" height="{height}" alt="" />
{/exp:imgsizer:size}
{/gallery_image}
</a>
<h1>{title}</h1>
</li>
{/exp:channel:entries}
</ul>
This is my code for the fancybox template:
{exp:channel:entries channel="gallery_images"}
<ul id="img_gallery">
{gallery_image}
<li>
{exp:imgsizer:size src="{image}" width="650px" height="500px"}
<img src="{sized}" width="{width}" height="{height}" alt=""/>
{/exp:imgsizer:size}
</li>
{/gallery_image}
</ul>{/exp:channel:entries}
Everything works fine except for the image scrolling.
I’d appreciate any help!
Without seeing the output of your ExpressionEngine tags, it's difficult to understand where the problem is. However, your problem may be as simple as making sure all of the images in a gallery share the same HTML relationship attribute.
Fancybox Galleries are created from elements who share the same rel="" attribute:
<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a>
<script>
$('a.gallery').fancybox();
</script>
In looking over your code, you're using the ExpressionEngine {title} tag as the rel="" attribute.
Since the title of your channel entry likely contains spaces and other special characters, a better choice would be to use the URL Title field, {title_permalink}.
The {title_permalink} tag converts the channel entry title to be URL-safe using either hyphens or underscores as character separators (using the Word Separator for URL Titles setting in the Global Channel Preferences).
Your updated thumbnail code would then be:
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}">
<img src="{sized}" width="{width}" height="{height}" alt="" />
</a>
If this doesn't work, perhaps you can provide a more complete code sample such as a jsFiddle or Pastie to help us understand where the problem may be.