Examine this
<a href="${mybean.href}" data-sly-test="${mybean.href}">
<img src="myimage.jpg" />
</a>
What we need
when data-sly-test="${mybean.href}" evaluates to false, only hide the anchor tag, and not its child elements. The default behavior is that the img tag will disappear also when the anchor tag disappears. We only want to hide the wrapper tag.
I expect some paramater like this
<a href="${mybean.href}" data-sly-test="${mybean.href # hideChildren=false}">
<img src="myimage.jpg" />
</a>
You can use the data-sly-unwrap in your anchor tag as shown below example where mybean.href true result removing of the anchor tag and producing only <img src="myimage.jpg" />
Example
<a href="http://www.google.com" data-sly-test="${mybean.href}" data-sly-unwrap>
<img src="myimage.jpg" />
</a>
For your case the following solution should work
<a href="${mybean.href}" data-sly-unwrap="${!mybean.href}">
<img src="myimage.jpg" />
</a>
Related
I looked at many featherlight.js posts already, but just could not work out how to make the gallery work without a tags etc.
My example is here: http://jsfiddle.net/pwLnrmoc/5/
HTML Code:
<h3>Gallery with different Markup</h3>
<p>Works fine as "single" featherlight, but not as a gallery. I do not want to introduce a tags to make this work as a gallery. What needs to change in the JS to make this work as a gallery?</p>
<ul class="gallery">
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 1</h3>
<img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg" />
</figure>
</div>
<img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" />
</li>
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 2</h3>
<img src="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg" />
</figure>
</div>
<img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" />
</li>
<li class="gallery__item">
<div class="buttons">
<button class="openLightbox">Open in lightbox</button>
<button class="openLightboxGallery">Open in lightbox gallery</button>
<figure class="lightboxContent">
<h3>Item 3</h3>
<img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg" />
</figure>
</div>
<img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" />
</li>
</ul>
JS Code:
$(document).ready(function(){
$('.openLightbox').click( function(evt) {
const $target = $(evt.currentTarget);
const $figure = $target.siblings('figure');
console.log($figure.length);
// to open in a single slide
$.featherlight($figure);
})
$('.openLightboxGallery').click( function(evt) {
const $target = $(evt.currentTarget);
const $figures = $target.closest('.gallery').find('figure');
console.log($figures.length);
// to open in a gallery
$.featherlightGallery($figures);
})
});
It works fine with the "single" featherlight button, but not with the gallery. I do not know how to set the content filter or target in my case. That's the error: Featherlight: no content filter found (no target specified).
Ideally the way you call featherlight and featherlightGallery should be consistent and work the same way.
How to check the empty list on Sightly?
I wanted to prevent render the item-list DIV if there was no item on itemImgaeList. But it returns me one (1) always if there were no items while trying with -
LIST_SIZE_PRINT = "${container.itemImgaeList.size}"; // retrun 1
HTL:
<div data-sly-test="${container.itemImgaeList.size > 1}">
<sly data-sly-list.imageList="${container.itemImgaeList}">
<div class="item-list">
<picture>
<img alt="${imageList.qlImageText}" src="${imageList.qlImagePath}" />
</picture>
</div>
</sly>
</div>
Any help?
data-sly-list can be used for implementing the above requirement of rendering the list elements only when the list is not empty.
The use of 'data-sly-test' is not required for checking a list, as the check for emptiness is done inherently by data-sly-list.
Here is a working example using data-sly-list:
<div class="item-list" data-sly-list.item="${container.itemImgaeList}">
<picture>
<img alt="${item.qlImageText}" src="${item.qlImagePath}" />
</picture>
</div>
More information:
https://www.aemquickstart.in/2016/08/htl-sightly-notes.html
<div id="reg_form_box" class="large_form">
<div class="clearfix _58mh">
<div class="mbm _3-90 lfloat _ohe">
<div id="u_0_0" class="_5dbb">
<div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
<div class="placeholder" aria-hidden="true">First name</div>
<input id="u_0_1" class="inputtext _58mg _5dba _2ph-" data-type="text" name="firstname" aria-required="1" placeholder="" aria-label="First name" aria-controls="js_0" aria-haspopup="true" role="null" aria-describedby="js_w" aria-invalid="true" type="text"/>
</div>
<i class="_5dbc img sp_beZQzZ7Rg6Q sx_5ca7f2"/>
<i class="_5dbd img sp_beZQzZ7Rg6Q sx_9c246c"/>
</div>
Above is the code for which i want to write Xpath using tag name traversal. Here is the xpath i have made
"//div[#id='reg_form_box']/div[1]/div[1]/div[1]/div/input"
Please suggest what's wrong here and how can i correct the same. Website is Facebook and field is First name on homepage.
Ideally unless you have a case of multiple modes that match the same xpath, you don't have to traverse through the entire hierarchy.
This will work:
//input[#name='firstname']
I would like to pass a value from a slide out of JSSOR to other parts of the DOM.
Markup:
<div class="slide">
<img data-u="image" src="bilder/bild2.jpg" />
<div class="caption" data-u="caption" ><p>Caption text</p></div>
</div>
JS:
jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){
$(".outer-caption").text(currentCaption);
});
The custom JSSOR Event, EVT_PARK, works fine. But what's missing is how to get the caption of the current slide and put it into the variable currentCaption. How to do that?
And if so, where could I have found that out on my own?
Please have a full test of following code,
<div class="slide">
<img data-u="image" src="bilder/bild2.jpg" />
<div class="caption" data-u="caption" id="caption-slide-0"><p>Slide 0 Caption</p></div>
</div>
jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){
$("#outer-caption").text($("#caption-slide-" + slideIndex).text());
});
I'm currently using an parser called Element Parser and I'm trying to parse an img tag that is the 4th img tag down under the div id "Group-E". I can retrieve the 2nd img but not anything after the 2nd img. The img that I'm wanting to parse is:
<img src="http://example.com/I_need_this_image_here.jpg" />.
How can this be done? So far I've used the following code to get the 1st img tag:
Element* needIMG = [document selectElement: #"div.edgeTop div#Group-E img"];
HTML Code trying to parse
<div class="edgeTop">
<div id="Group-E">
<img src="http://example.com/image.jpg" id="image" /> <img src="http://example.com/image2.png" border="5" />
<h4>Group - Section E</h4>
<div class="efs" style="width:28px;">Group:</div>E<br />
<div class="efs" style="width:28px;">Link:</div>Group E<br />
<div class="efs" style="width:28px;">Date:</div><strong>Febuary 15, 2001</strong> by <strong>Date</strong><br />
<br />
<img src="http://example.com/image3.gif" class="image" style="padding: 0 4px 7px 0;" />Group;. <b>Group E</b><br /><br />Group E Other:
<img src="http://example.com/I_need_this_image_here.jpg" /> Other:<br />Group Site
<div class="efs">
<div style="padding:18px 0 1px 8px;">Link Pics:</div>
<img src="http://example.com/linkpic.gif" class="imagelink"/> </div>
</div>
<div class="efsl"></div>
Thanks for the help.
Figured it out after hours of trial and error. You have to use the "+" selector to get the next element.
Could you not add a class to the image you want to parse such as...
<img class="imgtoparse" src="http://example.com/I_need_this_image_here.jpg" />