I'm trying to make it work lightbox-style image popups, but nothing - all of the extensions do not work. Seems something wrong with typo3 config or whatelse.
E.e. "Perfect Lightbox" - installed, template added, in contect images checkboxes "click enlarge" and "lightbox" checked. But nothing happens. In browser console no JS errors, JS files for Perfect Lightbox loaded. In the page source a piece of code around image looks like:
<a href="http://.../index.php?eID=tx_cms_showpic&file=17&md5=14b002d6aa25f9dd945e2a4e6c21ea4347298d11¶meters%5B0%5D=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjgwMG0iO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw¶meters%5B1%5D=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi¶meters%5B2%5D=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2¶meters%5B3%5D=YXNjcmlwdDpjbG9zZSgpOyI%2BIHwgPC9hPiI7fQ%3D%3D" onclick="openPic('http:\/\/...\/index.php?eID=tx_cms_showpic\u0026file=17\u0026md5=14b002d6aa25f9dd945e2a4e6c21ea4347298d11\u0026parameters%5B0%5D=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjgwMG0iO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw\u0026parameters%5B1%5D=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi\u0026parameters%5B2%5D=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2\u0026parameters%5B3%5D=YXNjcmlwdDpjbG9zZSgpOyI%2BIHwgPC9hPiI7fQ%3D%3D','thePicture','width=800,height=600,status=0,menubar=0'); return false;" target="thePicture">
<img src="http://.../fileadmin/_processed_/csm_room_05_3bd2eeb267.jpg" width="150" height="112" alt="" />
</a>
No any classes of lightbox generated (should be there?)
Just stumbled upon this Problem today, too!
This will work in your ts-setup:
# deactivate fsc popup, lightbox wrap
lib.fluidContent.settings.media.popup {
directImageLink = 1
JSwindow = 0
linkParams.ATagParams.dataWrap = class="lightbox" data-fancybox-group="lb{field:uid}"
}
You have to change the "dataWrap"-Attributes according to your lightbox-plugin, the given example works for fancybox.
( Originally found here: https://forum.typo3.org/index.php/t/213375/ )
as of TYPO3 7 you can use CSC (css_styled_content) or FSC (fluid_styled_content) to render your pagecontent. both extensions use different approaches for rendering of content elements. What do you use?
maybe the extensions you looked at enhances/modified only the other rendering extension?
What extensions have you tried yet?
Have you included their static template?
If you are unsatisfied with all of them you can also use any javascript-gallery/-picture-viewer and mostly needs little to insert special markup and little JS to initialize the viewer:
one example lightbox library found on http://lokeshdhakar.com/projects/lightbox2/
aside of inclusion of jquery and the JS-library, you need to include some JS with the initialization based on your HTML-markup. This library seems to work on all images with the same data-attribute data-lightbox:
set option:
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
and for your images be sure to enhance the renderung with the following data-attribute like:
Image #2
Image #3
Image #4
you might make it more complex to have multiple lightboxes available on one page or to include only selected images
The Link is in your code snippet is still using the default rendering to open a popup window.
As Bernd mentioned, you might have forgotten to add the static template.
maybe you can try to add the following
# turn of the popup window
tt_content.image.20.1.imageLinkWrap.JSwindow = 0
# create a link to a bigger verion of the image
tt_content.image.20.1.imageLinkWrap.directImageLink = 1
If the js and css are in place it might maybe work then.
EDIT:
Since your using fluid_styled_content:
styles {
content {
textmedia {
linkWrap.lightboxEnabled = 1
linkWrap.lightboxCssClass = fluidbox
linkWrap.lightboxRelAttribute >
}
}
}
Modify lightboxCssClass and lightboxRelAttribute to your needs. With JS and CSS in place you don't need any Extension.
Related
I'd like to change a test made by a javascript on a website
<img src="https://img_small.jpg" class="pictures_load" of="true" onclick="var src='https://img_big.jpg';
if(this.readAttribute('of')) src='/noimagehown.gif';
the idea is to remove each javascript test line :
if(this.readAttribute('of')) src='/noimagehown.gif';
so I could see the big image version onclick, I tried it by removing the ligne when inspecting the page code and it worked.
Thanks
Based on what you have provided so far, the intension is to prevent the function of the following onclick.
if(this.readAttribute('of')) src='/noimagehown.gif';
Since above is dependent on this.readAttribute('of'), then the goal can be achieved easily be removing of="true"
Here is an example:
Look for all images with of="true" and remove of attribute
document.querySelectorAll('img[of="true"]').forEach(item => item.removeAttribute('of'));
I designed my resume with bootstrap and material design lite, now I want to convert the html page to pdf file.
I tried some libraries (jsPdf) and some tools (html2pdf, princexml), it produces the pdf file but the problem is, that pdf is not what it looks in the html page.
There is no styles, the output i am getting is similar to pressing ctrl+p` in browser.
My question is,
Is there any tools or libraries for my problem ?
or
Is there any options in above mentioned tools that i can use?
pdf outputs
Try this converter WKHTMLTOPDF on your back-end. It outputs exactly what your see in you browser. It supports html, css and even js. Wkhtmltopdf based on webkit.
Using runtime it can be used like that
wkhtmltopdf http://google.com google.pdf
In your case, it seems that wkhtmltopdf can not load css. Check right css include path. Do not use relative path.
Your problem is the Bootstrap library, not any plugins or PDF tools you are using. It removes most styles when you "print" a web page, including print to PDF. My company, the DocRaptor HTML to PDF service, has a great blog post with a list of suggested fixes for getting Bootstrap styles to print correctly, but they could be summarized as:
Print using screen CSS mode/rules, not print. Otherwise, you have to a lot of overrides for Bootstrap to get it to work right. Much easier to just make the renderer use screen mode.
Bootstrap will think most PDFs are an extra small device, like a cell phone, so you have to either adjust your breakpoints or your in-code column definitions.
If your last column drops to a new row, this is because Bootstrap defines the width for many columns as XX.66666667%. The PDF engine adds all these up, and because of the 7 at the end, it is technically greater than 100%. Since the row width is over 100%, it bumps the last column to a new row. the fix is to override Bootstrap's column widths (handy Gist file for that).
jsPDF is able to use plugins. In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:
Go to https://github.com/MrRio/jsPDF and download the latest Version.
Include the following Scripts in your project:
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
If you want to ignore certain elements, you have to mark them with an ID, which you can then ignore in a special element handler of jsPDF. Therefore your HTML should look like this:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Then you use the following JavaScript code to open the created PDF in a PopUp:
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
For me this created a nice and tidy PDF that only included the line 'print this to pdf'.
Please note that the special element handlers only deal with IDs in the current version, which is also stated in a GitHub Issue. It states:
Because the matching is done against every element in the node tree, my desire was to make it as fast as possible. In that case, it meant "Only element IDs are matched" The element IDs are still done in jQuery style "#id", but it does not mean that all jQuery selectors are supported.
Therefore replacing '#ignorePDF' with class selectors like '.ignorePDF' did not work for me. Instead you will have to add the same handler for each and every element, which you want to ignore like:
var elementHandler = {
'#ignoreElement': function (element, renderer) {
return true;
},
'#anotherIdToBeIgnored': function (element, renderer) {
return true;
}
};
From the examples it is also stated that it is possible to select tags like 'a' or 'li'. That might be a little bit to unrestrictive for the most usecases though:
We support special element handlers. Register them with jQuery-style
ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
There is no support for any other type of selectors (class, of
compound) at this time.
One very important thing to add is that you lose all your style information (CSS). Luckily jsPDF is able to nicely format h1, h2, h3 etc., which was enough for my purposes. Additionalyl it will only print text within text nodes, which means that it will not print the values of textareas and the like. Example:
<body>
<ul>
<!-- This is printed as the element contains a textnode -->
<li>Print me!</li>
</ul>
<div>
<!-- This is not printed because jsPDF doesn't deal with the value attribute -->
<input type="textarea" value="Please print me, too!">
</div>
</body>
I know this has been asked before but the answers given did not work for me and my scenario is in any case slightly different.
I am just starting to evaluate nanoGallery, which looks good for my requirement which is to run a slideshow of inline image references. But I simply want to run the slideshow from a link rather than having to display a set of thumbnails and then clicking/tapping on one to actually start the slideshow. Which doesn't seem to me to be a particularly unusual requirement, especially for a very large slideshow where the set of thumbnails would occupy far too much space on the screen.
My HTML is simply:
<a id="startlink" href="javascript:void(0)" style="margin-bottom: 40px;">run slide show</a>
<div id="nanoGallery">
<a id="first" href=... data-ngdesc=... />
...
So I have tried:
$(document).ready(function () {
$("#startlink").click(function (e) {
$("#nanoGallery").nanoGallery({
slideshowAutoStart: true,
...
});
$("#first").trigger("click");
});
});
I have tried various alternatives, including placing the script block at the end of body rather than in head, simply doing click() rather than trigger("click"), referencing $("#nanoGallery").children()[0] rather than $("#first"), and so on. I have even tried the createEvent/dispatchEvent approach as suggested elsewhere. But all I ever get is the row of (in my case empty as I have not supplied thumbnail images) thumbnail blocks which I still have to click on to start the slideshow. So it is possible that nanoGallery uses a different event or events rather than click? Has anyone actually got this to work with nanoGallery?
I have also seen a suggestion to use 'deep linking' using a hash value in the URL to identify the gallery/album in question, but I have no idea how to generate or determine this value and it may be that this only works with an online image repository such as Picasa.
Jon
I have 4 images that I use as a navigation menu, when I click on one it lights up (changes image) and the current goes out, and so on so forth.
It works well in chrome and ff (no firebug errors)
But in IE8 the functioning of the clicks (where it changes the view of a div) work it just doesn't change the img src here's the code:
<li id="bulletli1">
<a href="#">
<img id="bullethover1" src="img/bulleto.png" height="30px" width="30px" style="position:absolute">
<img id="bullet1" name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="this.src='img/bulletwhite.png';document.images['bullet2'].src='img/bullet.png';document.images['bullet3'].src='img/bullet.png';document.images['bullet4'].src='img/bullet.png'" style="opacity:0.4;filter:alpha(opacity=40)"/>
</a></li>
So basically what happens is inside onmousedown this.src gets set to the white bullet and all the others get set to the dark bullet point. There are no errors in the developer's tools.
Does this.src not work in IE8? Any advice would help, Thanks!
please check out, if there doesn't exist more than 1 image with the same name/id-Attribute.
In that case, IE would take the last of the images with the same name(note that document.images['somename'] can be an Array ), while other UserAgents will take the first One.
Maybe in that case you only don't see the change, for example if the changed image is outside the viewport.
greets
You shouldn't be embedding your JS into your code like this. While I advise using a library like jQuery (which will make your life easier), I'll explain without it.
Don't embed your JS into your code. If you really really need to, have it call a function like this:
<img id="bullet1" name="bullet1" height="30px" width="30px" src="img/bulletwhite.png" onmousedown="bulletClicked()" style="opacity:0.4;filter:alpha(opacity=40)"/>
Then in your head section between script tags you'll run your javascript:
function bulletClicked() {
this.src='img/bulletwhite.png';
document.images['bullet2'].src='img/bullet.png';
document.images['bullet3'].src='img/bullet.png';
document.images['bullet4'].src='img/bullet.png';
}
From what it looks like, you're going about this the wrong way, you're probably putting that onclikc code into every bullet image, slightly modified for each one. Instead, if you just used events you would simplify so much.
If you did something like this... (and specified your height, width, and other CSS in a style section, where they belong, don't do what you did, ever again).
<img id="bullet1" name="bullet1" src="img/bulletwhite.png" onmousedown="bulletClicked(this)"/>
Then your javascript could be...
function bulletClicked(e) {
document.images['bullet1'].src='img/bullet.png';
document.images['bullet2'].src='img/bullet.png';
document.images['bullet3'].src='img/bullet.png';
document.images['bullet4'].src='img/bullet.png';
e.src='img/bulletwhite.png';
}
There are much better ways to deal with this sort of problem, and I would highly reccomend you pick up jQuery and do some work with separating your HTML, JavaScript and CSS components of your pages.
I cannot reproduce the described behavior. The images seem to get replaced OK. Any further details you can provide? What happens when you click on the other 3 images? Do they get their image URLs straight?
Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny
Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.
If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.