I'm searching for a jQuery lightbox that includes a pagination below the image in the Lightbox itself to switch to specific images, without cycling through them all with standard arrows.
Example:
<< < 5 6 7 8 9 > >>
see following link for lightbox jquery with pagination
http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts
Related
Currently, I have an issue about display pagination title in Shopware, template use Twig, load pagination pages by ajax, multi languages use snippet.
Detail:
The pagination title that need to be displayed: Page "X". X is page number.
The site used multi languages site, ex: english (Page "X"), german (Seite "X") ...
For default url (ex: abc.com/category-name) or page = 1 (ex: abc.com/category-name/?p=1): Not display pagination title.
For other pages (page 2, 3, 4): Display Page 2 ...
Page items will be loaded by use ajax when click the page number.
So, I don't know what to do display the pagination title on page title with multi languages.
Can everyone help me to resolve this issue?
Thank everyone.
You can hook into this method:
ListingPaginationPlugin.onChangePage (see the source code in vendor/shopware/storefront/Resources/app/storefront/src/plugin/listing/listing-pagination.plugin.js)
And after calling the parent method, insert - for a proof of concept - code like this:
document.title = event.target.value;
This would simply show the page number in the title (but losing the original title)
I suggest you back-up the original title and just append the "Page X" / "Seite X" information to it according to your necessary logic.
Now you need the translated word for "Page" available in the Javascript code.
You could attach this as a data-attribute to the title tag in the according twig template and use the normal `|trans' filter. I am not sure if there is a better way to have translations available in Javascript code in Shopware, so I asked.
I have created 2 page layouts. The target page was exported with the "Single web page" option and "Default HTML". In the parent page I drag the hyperlink object to the page but I can not find anyway to link it to the target page. I have researched the question and can find answers for the pencil 2 version but those solution don't work in 3. Thank for your help.
Environment:
I'm writing a SPA with JSF2.2, Bootsfaces 0.9.1, Primefaces 6.0, JEE7 and Hibernate 5.2 in combination with MySQL 5.7 DB.
What I have:
My SPA has a navbar on the upper part and a specific menu based on the selection of the navbar on the left. On the right side and under the navbar I've my main "content page". Similar to this picture but with the difference that my menu is dynamic:
For updating the content page I'm using AJAX.
Everything around the navigation is working as I expected as long as my content page does not contain a b:carousel!
What I tried to do:
As I mentioned above my SPA and all navigation is working correctly unless I add a b:carousel to a content page.
Please consider following example:
I got 2 content pages. Page 1 contains a single label with some text. Page 2 contains a b:carousel with some images. Page 1 is the welcome page.
As soon as I navigate from page 1 to page 2 nothing happens. I need to completely refresh the whole page to see page 2 and even this is not working everytime.
My main question:
Is there any trick to update the content page with ajax if there's a b:carousel on it?
What am I doing wrong?
EDIT:
I created a sample project on github so you're able to see what I mean. I used Java 1.8, Tomcat 8.0.36 and Netbeans IDE, however the project is a Maven project an should work in eclipse, too.
Project: https://github.com/mweber96/stackoverflow39128418
SPA Approach I partly used: http://www.beyondjava.net/blog/single-page-applications-with-bootsfaces/
This question is related to my previous question: Use ui:repeat with b:carousel?
It's a combination of two bugs:
Your example at GitHub uses PrimeFaces, but it doesn't seem to use a PrimeFaces component. The effect is that PrimeFaces adds some fancy JavaScript to load the missing CSS files dynamically (which is great!), but it doesn't add the PrimeFaces core library, so Mojarra runs into an exception it silently hides. You can fix this by adding a (possibly hidden) PrimeFaces component to your page, by including the PrimeFaces core.js file directly (although I wouldn't recommend that) or - of course - by removing the PrimeFaces dependency if you really don't need it.
BootsFaces relies on the HTML attributes to initialize the carousel. To my surprise, this even works, at least partially. However, to start the sliding automatically, you still need to initialize the JavaScript widget manually. In your case, that's
$("#myCarousel").carousel();
BTW, I suggest you open a bug on our bug tracker to fix the latter point (https://github.com/TheCoder4eu/BootsFaces-OSP/issues). Thanks in advance!
I am using Kentico 7 as the CMS to create the website. I am searching for a Rolling Banner web part, to put on the home page as the head banner, which can:
Be responsive.
Have caption area.
have navigation button on left and right.
would be nice to have instruction for me to insert to Kentico 7.
Must works in IE8, Firefox and Chrome.
I have tried to use Camera Slider but it does not work in IE8.
Checkout Slick.
It's a pretty easy to implement slider that has good browser support, with good documentation, and can be responsive if you pass it the right arguments.
I typically place the wrapper for my rotators in the HTML Envelope of a repeater, then use build a transformation for my slides, like this:
<!--Envelope before-->
<div class="slick-wrapper">
<!--Transformation-->
<div class="slide">
<img src="{% GetImageMethod() %}">
</div>
<!--Envelope after---->
</div>
However, keep in mind that IE 8 does not support media queries, so you'll want to use a JS feature detection library like Modernizr
I am using PhantomJS to create PDFs from html.
It works fine, but I can't find out how to work with pagination; I want to create a page for each div in my document, but I can't find anything in the doc. about pagination.
If my document is short, it makes only one page, and if it is bigger, it creates one second empty page and my contents are in the first page which becomes very long.
Any idea ? (I am using phantomJS-node module for nodeJS)
PhantomJS takes care of webkit’s css implementation. To implement manual page breaks you can use these properties :
page-break-before : auto/always/avoid/...
page-break-inside : auto/always/avoid/...
page-break-after : auto/always/avoid/...
For example, a div can be :
<div style="page-break-before:always;"><!-- content --></div>
or
<div style="page-break-after:always;"> <!-- content --></div>
Controlling page breaks when printing in Webkit is sometimes not easy, in particular with long html tables.
Very late, but I had issues with "break-inside:avoid" using JsReport that were fixed by changing the element's display type to inline-block. More info here:
https://github.com/ariya/phantomjs/issues/10638
You should see this issue with different tips.
Try to use display:inline-block in the element that you don't want to breaks because the page break. The reasoning behind is that webkit already tries to preserve images from breaking. And images are inline-blocks.
Pagination works fine with :
var page = webPage.create();
page.paperSize = {
format: 'A4',
orientation: 'portrait',
margin: '1cm'
}
Check documentation here http://phantomjs.org/api/webpage/property/paper-size.html