Can not make blueimp-image-gallery work with jade in node.js - node.js

I've been trying to make blueimp-image-gallery work with Jade on my Node.js server.
I've followed the instructions and came up with this .jade page:
extends layout
block content
h1 Test
div(id='blueimp-gallery-dialog', data-show='fade', data-hide='fade')
div(class='blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls')
div(class='slides')
a(class='prev') ‹
a(class='next') ›
a(class='play-pause')
div(id='links')
a(href='http://mypage.com/1.jpg' title='Frente' data-dialog)
img(src='http://mypage.com/2.jpg' alt='Frente')
a(href='http://mypage.com/6.jpg' title='Piscina' data-dialog)
img(src='http://mypage.com/6.jpg' alt='Piscina')
a(href='http://mypage.com/0.jpg' title='Garagem' data-dialog)
img(src='http://mypage.com/0.jpg' alt='Garagem')
script(src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')
script(src='//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js')
script(src='http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js')
script(src='js/blueimp-gallery.min.js')
For some reason all I see are static links to the pictures referenced above. When I click them, instead of see the galery as the example show I get redirected to the image link itself.
Blueimp-image-gallery pages states a few requirements, but I'm not sure if I need them or how to install them.
Can you help me to make it work?

Check your javascript console to see if there are any javascript errors on the page. If there are, they should give you a place to start when looking for a fix!

Related

Using Cypress, how would I write a simple test to check that a logo image exists on a page

specifically, I would like to test that the logo appears on the home page of the app. I guess I am not sure what I should use to look for the image.
I tried
it('has a logo', function () {
cy.visit('http://localhost:3000')
cy.get('img').should('contains' , 'My-Logo.png')
})
instead of cy.get I also tried to just use
cy.contains('My-Logo.png')
but it also fails.
I wasn't sure what element I should use or if I should be using get, but it fails. When I look at the source code for the web page, the logo is hidden within the javascript (nodeJS, vueJS,and expressJS application) and I noticed the javascript seems to add a sequence of numbers and letters to the image when I go to the image page even though the image name in the assets folder does not have it on there. My-Logo.d63b7f9.png.
I figured out the solution on my own.
cy.get('form').find('img').should('have.attr', 'src').should('include','My-Logo')
I inspected the element and found the <img src... line was embedded within a <form>. I could do a cy.get('form') and pass, but could not do a cy.get('img') to pass. So then I chained them together and it passed. I am not sure why I cannot just simply add the second should statement, but it failed when I tried to just run:
cy.get('form').find('img').should('include','My-Logo')
I am not entirely sure why, but it needed the first "should" statement. I got around VUE adding the sequence of numbers and letters by just asking for the name of the file without the extension. I hope this maybe helps someone else as the documentation did not seem to cover this.
you can use only one should statement like:
cy.get('form').find('img').should('have.attr', 'src', 'My-Logo')
the third arg of should is the value to match with the element attribute.

AEM6.1, the component that bake in the html directly won't work correctly in touch UI

I use sly data-sly-resource="${# path='column-1-title', resourceType='wcm/foundation/components/text'}" to bake in the text-sightly component directly(cq:include tag also have the same problem). But after I authored the content of the text, a 404 error arises in the console. And the page can't be authored anymore until I reload the page.
CLICK HERE TO LOOK 404 NOT FOUND ERROR IMAGE
Try using:
resourceType='foundation/components/text'
We have also observed that using "'wcm/foundation/components/text'" has issues in TouchUI.
We need to specify a proper sling:resourceSuperType for the component that be baked in.

How to display modules only on search results in Joomla 2.5?

Hello please read the whole question, this isn't just solved by enabling the modules only for the search page:
I have a few modules that are exclusively shown on the search page in Joomla.
I created a hidden menu entry for the search as well in order to tell modules to only show on this page. This works alright, but when I click one of the results and get redirected to the actual result, then the modules, which should only show up on the search page are still shown in the result page.
Any clue how to fix this? Really annoying as I use 3rd party search enhancing modules, and they are showing on the results.
Using standard Joomla, there's no way to target modules to only the search results page and none of the pages that link off the results – but I know you knew that! The hidden menu item is a help, but does not change the menu item of some of the links off that page. It's all to do with the allocation and use of "Itemids" in Joomla.
To be able to target modules more specifically, you need to use a 3rd-party extension. I developed MetaMod (www.metamodpro.com) to cope with exactly this use case. MetaMod is a wrapper module that can then decide just which other module to include in itself (or not). So you assign the MetaMod to the page, then put a snippet of code inside the MetaMod which decides which other module to include.
In this case, I'd use the following in MetaMod:
if ($core_genius->check("pagetype = search, searchresults")) return XXX;
// replace XXX with the module id of the module to include
// ONLY on the search page, or the searchresults page, but
// no other type of page.
Hope that helps,
Stephen
Although MetaMod is great (I've used it myself & Stephen's support is great!) there is another way to do it without using 3rd party extensions.
You could create new module positions in your template above (or below) the module positions you wanted to use and wrap them in an if statement like so:
<?php if(!isset(JRequest::getString('searchword'))) : ?>
<jdoc:include type="modules" name="right-search" style="xhtml" />
<?php endif; ?>

Content scripts on prerendered pages?

Are Content Scripts (http://code.google.com/chrome/extensions/content_scripts.html) injected into prerendered pages (document.webkitVisibilityState== 'prerender') ?
I’ve been reading https://developers.google.com/chrome/whitepapers/prerender and https://developers.google.com/chrome/whitepapers/pagevisibility, and am trying to figure out how Content Scripts work with page prerendering/prefetching.
Thanks
TheZ, tomdemuyt: I’m afraid you guys are missing the point. ‘run_at’ specifies whether the content script is injected before or after the DOM is constructed.
However, I am talking about document.webkitVisibilityState, which can be ‘prerender’ (when the page is in a background/invisible tab), ‘hidden’, or ‘visible’. Note that webkitVisibilityState can transition from ‘prerender’ to ‘hidden’ or ‘visible’, or back and forth between ‘hidden’ and ‘visible’, without any changes being made to the DOM. (In order to better understand this, read the articles linked in my original post.)
I think I’ve been able to determine that content scripts ARE injected into prerendered pages. Here’s the problem, however: let’s say my content script does something that should not occur on a prerendered page. For instance, it does pageview count, or adds animation, neither of which should begin until the user is actually viewing the page. So it seems that my content script should do something like what’s shown in the code examples on https://developers.google.com/chrome/whitepapers/pagevisibility - check document.webkitVisibilityState, and also listen to the ‘webkitvisibilitychange’ event, and only do pageview count/start the animation when document.webkitVisibilityState is, or has transitioned to, ‘visible’.
I may have just answered my own question, but I just wanted to make sure that I was on the right track.
Thanks
As TheZ mentioned, you should ues the run_at setting.
Link to docs : http://code.google.com/chrome/extensions/content_scripts.html#registration

How wappalyzer(Mozila addon),GTmetrix finds the cms platform

I am currently developing a site which is not supposed to expose its developer magento platform(Sorry about that ).
I thought the wappalyzer(Mozila addon),GTmetrix site is finding the cms names by its html format but when i saw a empty white page with that tools it still shows me like am using Magento(there is nothing in the source view - its white page), so now how they are finding that am using magento. Any idea about hw they are working? I checked headers but there nothing specially mentioned as magento. Same goes with wordpress/joomla - simply wappalyzer(Mozila addon),GTmetrix finds the site platform even there is no html source.
So I guess something with in header(i might missing something) or what it can be? please advice. Attached screenshot of it.
Thanks in advance
You can view Wappalyzer's source code: (Ctrl+F Magento):
https://github.com/ElbertF/Wappalyzer/blob/master/share/js/apps.js
Most likely Wappalyzer picked up on the "Mage" JavaScript variable. You can see this by clicking the DOM tab in Firebug.
They are finding it using the words like mage,varien,magento. If it finds any of these words inside css/js file class,#id,inside comment then it found it as magento.
Also gtmetrix does one more step , like it is checking the css/js url path - if it fins the url like skin/frontend then it says it as magento.
Dont forget cookies...
I use FireBugs. Go to main menu -> Cookies
There is frontend in cookies.

Resources