There is a code:
<a data-src="https://lipsum.app/id/5/800x600" data-lightbox="p">
<img src="https://lipsum.app/id/5/800x600">
</a>
It is necessary that lightbox 2 takes a link from data-src
Lightbox2
https://lokeshdhakar.com/projects/lightbox2/
Related
How to iterate next page link using scrapy python
Html code:
<span class="pager-links">
1
<span> 2</span>
3
4
5
</span>
<a class="nav next" href="/search-results?p=3"> </a> // This is for to click the next page link.
<a class="nav last" href="//search-results?p=327"> </a>
In an iMacros script, how can you trigger a click on a link with a specific attribute? In this case, the link I would like to have clicked has a class of "i-project":
<div data-explore-index="1" >
<div class="i-project-card ">
<a href="/xxxxxxxxxxxxxxxxxx" ">
<span ></span>
</a>
<a href="blablabla" class="i-project">
<img src="https://blabla.jpg">
</a>
</div>
</div>
You should be able to select this link based upon its CLASS attribute:
TAG POS=1 TYPE=A ATTR=CLASS:i-project
I am crawling a webpage and i am using Beautifulsoup. There is a condition where i want to skip the content of one particular tag and get other tag contents. In the below code i don't want div tag contents. But i couldn't solve this. Please help me.
HTML code,
<blockquote class="messagetext">
<div style="margin: 5px; float: right;">
unwanted text .....
</div>
Text..............
<a class="externalLink" rel="nofollow" target="_blank" href="#">text </a>
<a class="externalLink" rel="nofollow" target="_blank" href="#">text</a>
<a class="externalLink" rel="nofollow" target="_blank" href="#">text</a>
,text
</blockquote>
I have tried like this,
content = soup.find('blockquote',attrs={'class':'messagetext'}).text
But it is fetching unwanted text inside div tag also.
Use the clear function like this:
soup = BeautifulSoup(html_doc)
content = soup.find('blockquote',attrs={'class':'messagetext'})
for tag in content.findChildren():
if tag.name == 'div':
tag.clear()
print content.text
This yields:
Text..............
text
text
text
,text
I posted a test site at http://jobajoba.org that shows some foundation 4 elements.
I am using vanilla out-of-box foundation 4 framework but having trouble with lightbox thumbs showing up as bullet items in a list (they should be in row similar to "block grid" example shown on the page).
I can't figure out what I am doing wrong... note that everything else on page seems to work out of box.
On edit:
I forgot about this question, but about a month after I posted this, Zurb indicated to me that they used a block-grid to create the effect. Something like this worked for me:
<div>
<ul class="large-block-grid-4 small-block-grid-2" data-clearing>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo1.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo1-th.jpg" data-caption="THIS IS CAPTION 1">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo2.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo2-th.jpg" data-caption="THIS IS CAPTION 2">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo3.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo3-th.jpg" data-caption="">
</a>
</li>
<li>
<a href="http://foundation.zurb.com/docs/img/demos/demo4.jpg" class="th">
<img src="http://foundation.zurb.com/docs/img/demos/demo4-th.jpg" data-caption="">
</a>
</li>
</ul>
</div>
Foundation's documentation examples uses a custom docs.css file:
http://foundation.zurb.com/docs/assets/docs.css
The styles for the Clearing Lightbox found under the heading /* Clearing Styles */ are exactly the same as those included in the vanilla download. However, the file also has an extra section specifically for the documentation example.
/* Clearing Docs */
.clearing-thumbs { list-style: none; }
.clearing-thumbs li { float: left; margin-right: 10px; }
Adding these rules to your own css file should provide the layout you're looking for.
I am adding a class value to sc:image but when it renders it doesnt show up correct. Here how it looks like in HTML without render:
<a href="/">
<sc:Image ID="Logo" runat="server" Field="Header Logo" class="logo" />
</a>
But when it renders to the webpage it shows up like this:
<a href="/">
<img src="/~/media/logo.png" alt="" width="196" height="34">
</a>
However, I want to accomplish something like this:
<a href="/">
<img src="/~/media/logo.png" alt="" width="196" height="34" class="logo">
</a>
How should I approach this problem?
One way to apply a class to the image would be to place the CSS class at a higher block level that is not a web control, perhaps on a wrapping DIV. This might allow you to leverage styling across the whole block and not just the image itself.
To apply the class directly to the IMG tag, you should use the CssClass property of the Image control so that it will render out as a "class" tag:
<a href="/">
<sc:Image ID="Logo" runat="server" Field="Header Logo" CssClass="logo" />
</a>