I have a page with 3 videos. When you click a video, it opens in a Modal, and clicking away closes the video. Cool.
There is CSS to position the video and draw where you have to close it. Then there is the Javascript file, which reads all the class names and creates the clicking for opening and closing the video. Currently, I need a chunk of classes named 001, 002, 003... linking to an equal number of JavaScript files, which have also been edited with these new names and the video links. Because the class IDs will all have to be different with in the same HTML file, I will also need additional code in the style sheet despite it all being identical except for the names.
This page is going to have 30 or more videos..
I know that stack Overflow is for tweaking each other's code, but if you could at least point me in the right direction that would be very helpful indeed.
I am looking for a way to make a list of YouTube videos, and attach them to links so that only one CSS script is needed to style all of them at the same time, and only one Javascript file is needed to play all of them the same way.
What I need (I think), is the method in JavaScript for grabbing a string that was clicked on, and putting that into a chunk of code, then displaying the associated video.
So if I click on video #12, the JS would display a Modal containing youtube*com/embed/(video#12)/.
Another example is a guy in the projection room of a theater plays 8 different videos, vs 8 guys that each show 1.
You could attach an attribute with the video link into each video element. Then you could give all the elements the same class and even target them by that class. When you click them, your JS code should retrieve the video link from the attached attribute, and display it in the model.
So it would be something like:
<ul class="video-list">
<li class="video-link" data-link="https://youtube.com/embed/[video#1]/.">The link title</li>
<li class="video-link" data-link="https://youtube.com/embed/[video#2]/.">The link title</li>
...
</ul>
Then add a event listener on each element:
var videoLink = document.querySelector(".video-link");
videoLink.addEventListener('click', function() {
var link = this.getAttribute("data-link");
openModal(link); // A method that opens the modal.
});
With this, you can add styling to the video-link class as you please, to target all the video links without them having different id's or classes. It won't limit the amount on videos either since they all have their own link attached directly to the element.
Maybe this would lead you in the right direction?
Solved! Please see
Link or button sets a variable, then calls the script
for the results and me gushing over how awesome everyone's been with helping :)
Related
I am working on a Shopify website, I want to track how users interact with images on the product page. let's say a user sees the first image (a tag should fire), then he scrolls on the second product image (another tag should fire), and so on.
So I can know how many images on average the user sees on a PDP, what is the conversion rate of users who see 2 images vs 3 images, etc. (On GA)
This would require a custom javascript event which has to be passed on GTM, I looked at different resources available but could not find the right way.
Any help with how to proceed with this, or resources I can refer to would help.
I think you can try the element visibility trigger.
Here is the setting detail
Add a good name about it.
Choose the CSS Selector since you have multiple images.
Set the right CSS Selector. If you don't know how to set it. You might need to give us the URL of your website and we can provide you the selector.
Choose Once Per Element
You can decide when the image shows more than x%. Fire the trigger.
Since you need the order of the image. You can refer about this
#GTMTIPS: GET POSITION INDEX OF VISIBLE ELEMENT
If you have further question. Feel free to leave comment and I'll update accordingly
I'm working on a simple picture gallery that pulls down info from the Flickr API. Basically the premise of the gallery is that each page must hold 10 images, and paginate according to how many pictures are in each gallery. When a user clicks on a photo, an overlay should pop up with the picture in a frame.
You can find my code on CodePen here: http://codepen.io/anfperez/pen/QEZNEZ
I've been able to get the gallery working successfully for the most part with one exception: on the first page, only nine pictures are loaded. My theory is because I have some jQuery commands that paginate 10 <img> elements. In my HTML I have an img tag hidden inside a #frame div, which is hidden until the user clicks on a picture. So my jQuery counts that hidden img tag as a part of the 10 image maximum, and includes it in the pagination system. How can I exclude the first img tag? I've been trying to use
$('img:not(:first)')
as my selector, but it's not working.
The second issue is that, if you click away to a different page, then return to the first page, you can now see a large blank frame element. But that element should be hidden whenever a picture is not clicked. Any suggestions for how to make this code cleaner?
The issue is that you're adding the paginate class to all <img> tags when you're setting them up in your success loop on line 38.
This: $('img').addClass("paginate")
Should be: $('#photo-list img').addClass("paginate")
This limits it to all the images in your photo-list div so it doesn't catch your invisible frame image. This fixes both the off by one issue and the paginate issue that shows the invisible frame. You can also move this outside of the loop as there's no reason why this should be called on all images at every loop iteration.
Unrelated, you should also add a semicolon on line 78. Chrome throws an error thinking that the return value from the first anonymous method is calling the next method. Code looks fine otherwise.
I have a question regarding watermarks for images. For instance: I want to display an image (pure HTML). If a user clicks on the image however, there should be a watermark, showing where that photo comes from.
I was thinking about a layer-solution. Putting an invisible layer over the main image and link to another image instead. That would force me to have every photo two times on my server. Not the best idea.
I found a lib called watermark.js (link here: watermark.js).
However, this would only allow me to put watermarks right in the beginning.
To explain the situation: User on my site sees everything without watermark, opening it directly in the browser should add the watermark.
Another solution I had was to always apply a watermark via script, and remove it if the user is currently on my site.
Maybe you have a solution to apply watermarks only on the linked images. I'd like to realize it via jquery.
Thank you in advance.
i have a tricky problem I'm not able to solve. I'm using jquery.prettyphoto.js to display a set of images in a "lightbox".
The first photo in that set is the "AvatarPhoto" and it's rendered twice on the page. First on top, standing alone and also in a slider with all the other photos. Both are linking to the same picture in the same gallery.
Take a look at this: http://jsfiddle.net/wtZLY/
okay I solved that based on halfer´s answer, simply gave the first link of "allFotos" an id :
$('#profilePicture').click(function() {
$('#foto_0').click();
});
but I wonder if I can´t use the prettyphoto API
$.prettyPhoto.open()
but looks like I there is no possibility to simply open the prettyPhoto[gallery1] down on the page. I would have to pass all images and titles as an Array and in my case this would be heavy repeating myself.
Your selector works on this attribute:
data-rel="prettyPhoto[gallery1]"
If it is not your intention to add the first picture to the gallery, remove the data-rel attribute from that image, and it will work.
Personally, I'd use standard tags/ids/classes for this. In your JS you could alternatively use this:
$("#allpictures a").prettyPhoto();
That will select all links that are a descendent of the allpictures element.
Addendum: if you want to open the gallery using your profile picture, then I suggest you use the above for the gallery items, but have a special click handler for the profile. Set up an id for each image, such that the profile picture can be used to determine the gallery copy. For example you could use profile_123 and gallery_123.
This will permit you to add a click handler on the profile image, derive the id of the gallery copy, and to raise the click event on that element.
I have a webpage i keep adding a like button app to but whenever i click like i get some random member phot of a lady on facebook representing my page. this is frustrating.
I find all this html script and i cant seem to put it together properly so will you just please give me a simple paste ready like button formula with a set specific thumbnail photo that I can choose to represent my own page?
Use the open graph properties for your webpage defined here:
http://developers.facebook.com/docs/opengraph/