Is it possible to count a hit for each image seen by a user (when they scroll the page) on a AMP page just like it's possible to count a hit on a carrousel for each image scrolled for example?
If so could you please let me know how?
Thank you so much for your precious help.
Best
Absolutely you can use amp-analytics and set up a trigger for when an image is visible and use a selector to target the specific image. Please see https://amp.dev/documentation/components/amp-analytics/?referrer=ampproject.org#triggers.
Alternatively, you can use amp-pixel and include that very close to the image. When the amp-pixel is in view, it will fire a request to the endpoint specified on the tag.
Related
As you can see in the screenshot I have attached, I am not able to make this post list in responsive mode.
I don’t know but somehow it is showing image in mobiles as in attached screenshot.
I suggest you use a minimal CSS framework, which helps you position your objects through a grid. There are many of those frameworks, but i suggest you check out miniCSS, iota or chota for a start.
Ey. I've seen the other post about Lightbox gallery effect for Flex, but after having played around with it I cant seem to get it to work 100% (The image is as small as the thumb, and I cant make it bigger). And this also lacks some functionality I'd like to have.
So, one example would be, of course, this: http://lokeshdhakar.com/projects/lightbox2/
If you click any image on the image set you can swap between them with an arrow. This is what I'd like to have.
Also, it would be nice if it was possible to display the thumbnails for the other images in the same set under the bigger picture(when one image is already clicked).
I've tried to search for components like this, but I cant seem to find any other.
If any of you know of any nice components or snippets of code for this kind of effect then please let me know! =)
Kind regards,
Stian Berg Larsen
EDIT:
So I've searched around and tried a number of examples, but I cant seem to get any of them to work. There is always an error, and none of the examples are exactly what I want.
I simply need a way to show images like Lightbox. With a prev/next arrow and maybe a close button. Nothing more than that. How would I go about making this, or use an existing component?
Im using a TileGroup to hold all my thumbs (so that they will fill out the width of the Group with more images if there are room for it). If it's possible to generate this list of thumbnails dynamically too then that would be great, but basically what I need is to show images with a Lightbox style when I click them.
Thanks! =)
I ended up just making my own lightbox effect. :)
Created an Actionscript class (based on Group) and added image loading functionality, prev/next/close buttons and borders and such. Works like a charm :)
I currently have a basic Fancy Box gallery (link calls larger image and title that is then displayed in the Fancy box).
How/ What would be the best way to integrate a comments system into this? Each photo has member comments but I need a way to show these next to the photo in Fancybox.
You may consider my fancybox "a la" Facebook ;)
http://www.picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html
You could insert any html in the right area.
Simple, Just like you display each picture with their independent comments, you will just display them into a larger box on click on a picture. just like facebook. Use whatever ajax u are currently using in the page into the box.
how can you specify which image you want to show on when sharing an article? Now it just picks random images from our site which aren't relevant. I tried adding an image_src link to the head of my site but this didn't help. Any idea how you can do this?
The API of LinkedIn doesn't tell us how:
http://developer.linkedin.com/docs/DOC-1075
Kind regards,
Daan
There is currently no way to specify a thumbnail. They don't seem to use oEmbed, OpenGraph or image_src. However, you can trick it into picking a specific image.
Make your image 62x62 pixels (other sizes will likely work, but non-square aspect ratios failed for us in the combinations we tried). Also, make it the first IMG tag in the document.
If you don't want users to see that image on your site, you can hide it with postion:absolute and right:-999px.
I've been noticing quite a few websites including YouTube and http://video.yahoo.com/, amazon and Facebook are loading content above the fold and then once you scroll down the rest is loaded. I'm not sure if it's the rendering of the content that is being delayed or if its media such as images that are being fetched when you scroll down.
Does anyone know how it is being done or how I can implement something similar?
true. They use javascript ( or jquery) to load content on scroll.
Most of the time Images as they take the maximum time in a page load.
Well there are several jQuery Plugins available out there which help you to achieve the same.
One plugin example is >>>> jQuery Lazy Load inspired by YUI ImageLoader
Or google - something like this - "jquery + lazy load plugin"
hope that helps
Regards, J'Sinh
http://api.jquery.com/scroll/
using this event handler, you check the scroll position, compare it to the document height http://api.jquery.com/height/
and if scroll position compared to the height indicates that the user is at the bottom, or near the bottom, use ajax to get more content.
Sorry for such a general answer, it's just that this needs experimenting, and writing the code would take a little while. Maybe someone else would do it, but I will just stick to this.