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.
Related
When I use an anchor tag without an href="" all is good and the button style is there, the second a add an href it completely removes the anchor tag and leave only the text inside the parent div
without href:
<div class="container">
<a class="button"> my button</a>
</div>
result in browser devtools
<div class="container">
<a class="button"> my button</a>
</div>
with href
<div class="container">
my button
</div>
result in browser
<div class="container">
my button
</div>
Looks like this could be the work of the link checker. Try adding x-cq-linkchecker="skip":
<div class="container">
<a x-cq-linkchecker="skip" href="/content/mypage.html" class="button"> my button</a>
</div>
I guess it might be also related to xssconfig
as you add 'href' attribute to div in your example
<div href="/content/mypage.html" class="container">
<a class="button"> my button</a>
</div>
In general it is not allowed, therefore AEM can remove it
/libs/cq/xssprotection/config.xml
I have a component and want to give authors the option in the dialog to add a link path. If this link path is filled in, then I want the component wrapper to be an <a> tag. If it's not filled in, I want it to remain a <div>
<div class="section" data-sly-test="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Is there a cleaner way to do this than creating two separate build outs of the whole component with a data-sly-test switch? I've struggled on a lot of examples like this where the wrapping tag/div is changed by the dialog. Looking for something similar to how data-sly-element behaves on the <h2> within my code here.
There are multiple ways to achieve what you are trying to do.
Using data-sly-element and data-sly-attribute
data-sly-attribute doesn't add the attribute to the tag if the value of the attribute is empty/null. Hence, it can be used as shown below to replace the anchor tag with a div if the path is unavailable.
<a class="section" data-sly-attribute.href="${properties.path}" data-sly-element="${properties.path ? 'a' : 'div'}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
Using data-sly-unwrap
Unwrap only removes the containing tag and doesn't remove all the inner tags. Hence, this can be used as shown below.
<div class="section" data-sly-unwrap="${properties.path}">
<a href="${properties.path}" class="section" data-sly-unwrap="${!properties.path}">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</a>
</div>
Using data-sly-template and data-sly-call
This is similar to what you have initially written, but instead of duplicating the entire inner HTML, it can be moved to a template and called twice.
<div class="section" data-sly-test="${!properties.path}">
<sly data-sly-call="${tpl}"></sly>
</div>
<a href="${properties.path}" class="section" data-sly-test="${properties.path}">
<sly data-sly-call="${tpl}"></sly>
</a>
<!--/* The template */-->
<template data-sly-template.tpl="">
<img src="${properties.icon}" alt="${properties.alt}" />
<div data-sly-test="${properties.heading}">
<h2 data-sly-element="${properties.headingSize}">${properties.heading}</h2>
</div>
</template>
For more information on HTL Block statements, refer this official doc.
How can I make a link out of THIS PROJECT?
And by link, I mean I wanna be able to click on the picture in order to open a popup box.
This will do the trick
<div class="grid">
<figure class="effect-apollo">
<a class="modal-button" data-content="ef">
<img src="#">
<figcaption>
<h2>Strong <span></span></h2>
<p></p>
</figcaption>
</a>
</figure>
</div>
I am well aware that there are almost 10 duplicates of this question. But solutions of none of them work for me. So here are the details:
I am using carousel from bootstrap. I use carousel to display set of 3 divs on each cycle.
The structure is as follows:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
<div class="item"> <!-- this div has display:none -->
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Above is the stripped down version, just to leave out the unnecessary stuff. The problem is, all the Facebook like buttons inside the div which has display:none set have width and height set to 0.
This problem occurs in Firefox(the latest version).
I am using the HTML5 version of like button generated using FB like button configurator.
Below is the resultant like button code in the hidden div:
<div data-show-faces="true" data-width="450" layout="box_count" data-send="false" class="fb-like fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml-state="rendered">
<span style="height: 0px; width: 0px;">
<iframe scrolling="no" style=" height: 0px; width: 0px; class="fb_ltr fb_iframe_widget_lift" src="">
</iframe>
</span>
</div>
The like buttons in the active divs are the only ones visible. Even those in the modals (which are hidden initially) are not visible too.
How do I make it visible when div has display:none?
I had the exact same issue you are having and my code solution is below. The key thing to note is that anytime you see the facebook generated code having a height and width of 0 it means that the facebook button is loaded while the CSS on it is display:none. You can't just force it to be displayed because it is possible that the facebook button hasn't fully loaded by the time the bootstrap carousel has loaded. The trick is to display all your items in the carousel using active on the initial load then once your facebook buttons have loaded you can remove active from your non-starting slide.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
<div class="active item"> <!-- this div also is active for initial load -->
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
<div class="span4>content along with FB like button </div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
window.fbAsyncInit = function () {
FB.Event.subscribe('xfbml.render', function () {
$('.carousel-inner>.item:not(:first-child)').removeClass('active');
});}
If you set a div to display:none; by default all of the child objects will have display:none which means they wont show up. Same if you set the size to zero.
IMHO it's not the right way to do it, but try setting the child object to display: block; or display: inline; and giving it a defined size.
Put iframe version of Like button in any hidden content and it will work.
worked for me like a charm
I had similar issue but only in IE. I saw that iframe width and height stayed 0. This solved my problem:
.fb-like.fb_iframe_widget iframe{
width:60px !important;
height:60px !important;
}
Having some issues trying to get my photoset width to 340px without messing up the way the smaller photos in the photoset display. http://d.pr/icuf
{block:Photoset}
{block:IndexPage}
<div class="photo_set">
<div class="header">
<h1>photoset</h1>
{block:NoteCount}<a href="{Permalink}">
<div class="note">{NoteCountWithLabel}</div></a>
{/block:NoteCount}
<div class="clear"></div>
</div>
<div class="view">
<a href="{Permalink}">
<div class="link">View Photoset ↦</div></a>
</div>
{Photoset-250}
</div>{/block:IndexPage}
{block:PermalinkPage}
<div class="perma_width">{Photoset-500}</div>
{/block:PermalinkPage}
{/block:Photoset}
You won't be able to get a 340px width using Tumblr's default code. You have two options:
1) Don't use Tumblr's {Photoset} tags and display each photo individually with {block:Photos}...{/block:Photos} and style them as you want.
2) Use a plugin like this: https://github.com/PixelUnion/Extended-Tumblr-Photoset (full disclosure, it's something that I wrote)