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.
Related
So I'm constructing a induction-type webpage, I'm using a template which someone has already previously built in order to see how it fits my needs
Essentially, it includes a dynamic page switcher that uses previous and next buttons to swap out the body content without having to load another entire page.
EXAMPLE: https://css-tricks.com/examples/DynamicPage/
Upon clicking a hyperlink inside the main content, the body will show the correct content from the external pages. However, if I click either of the navigation links up top ("Home >> Inductions >>") the link is not opened as a new page, but instead I think ajax attempts to load that page inside the ajax-body section.
Specifically in the codepen, this is the navbar I'm mentioning which I do NOT want ajax to work on. I've tried multiple fixes but finally throwing my hands in the air.
<nav id="location">Home >> Inductions >> Vehicle 1</nav>
What I am aiming to build is attempt something like this: https://css-tricks.com/examples/DynamicPage/
This is the creator showing how its made, if I am unable to describe it as well as I should: https://css-tricks.com/dynamic-page-replacing-content/
I made a codepen the best I could, without being able to upload the other 2 pages which ajax will load the bodies from - https://codepen.io/dylan-mclean-the-vuer/pen/XWbONyP
Just imagine that clicking the 'prev' or 'next' will load a body inside the contained from external HTML docs. I couldn't figure out how to use multiple HTML files. I still need to make a proper prev/next in JS somehow still, just will take some time! Currently, prev just links to one HTML doc and next links to another.
Keep in mind I'm still at the diploma-grad coding level, so I'm sorry if I'm missing an obvious solution, or if its too messy to understand!
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 :)
Lets say we have a long list of posts on a single page. Each of those posts has a hidden div with multiple img tags inside it. When a user clicks on the post, the images inside the hidden div should be showcased in a modal gallery.
Which approach is better SEO-wise - outputting the Bootstrap modal + image gallery markup for each post and unhiding it whenever the user clicks on the post, or having a single hidden modal and clone()'ing images to it?
I'm leaning towards the first solution because it is way easier to implement. The second one requires listening to DOM events as I should only initialize the gallery after the images have been cloned to the gallery div inside the modal and thus is a bit trickier. Also, I'm not so keen about copying DOM nodes here and there.
Which is the better approach?
EDIT: I suppose that it is better to output all images during page load instead of loading them up using AJAX if SEO is important, right?
I suppose that it is better to output all images during page load instead of loading them up using AJAX if SEO is important, right?
Both methods are equivalent from an SEO perspective for Google, but it may take it a bit more time to index your content for the second method since, it needs to execute Javascript.
However, not all search engines are capable of executing Javascript. Therefore, image tags are all they can eat SEO-wise.
I have a JQuery TouchTouch based gallery on one of my websites. It works perfect when I call it once for the photos list that was loaded with the page. Recently, I needed to add new functionality to this page (the website is online store, I'm talking about page with a product). I need to load same product of a different color without leaving the page (different URLs are still used for this purpose, but I need to change this ASAP because of duplicates affect SEO).
Using AJAX, I'm loading all necessary information about product (including photos URLs) and everything is ok, except the JQTT gallery: if I don't call touchTouch() on selector that was used the first time, during the page loading - nothing works at all (that is obviously, because no photos information auto-updates provided in plugin). However, when I call touchTouch() second time on the same selector, overlay with buttons (arrows) appears, but photo is never loaded, only the loading GIF is shown permanently. I have checked this in Mozilla FireFox and Google Chrome - the same behavior. By the way, thumbnail photos are loaded fine, but displaying them is not directly related to the plugin, because they are only triggers for loading large photos.
The first thing that may help, as I supposed, was a test: call touchTouch() not immediately after AJAX-request and new photos insertion in DOM, but call it after a long delay (for example, 10 secs) to make sure that problem is not in plugin's preloading features (if any) or someting similar. That didn't help.
Then I made the second test: I deleted first touchTouch() call in document-ready (so, plugin doesn't work on document load), then made this call after updating photos. In this case, plugin worked fine.
So, in view of the aforesaid, i'm searching for solution how to make JQTT plugin work after photos list update. The selector is always the same (I mean CSS class name that is used for every photo and that is called in $(selector).touchTouch()).
Here is a real example on website: http://raroom.com/chairs/chair_bertoia/bertoia-1
At the moment, two versions of one product (designer's chair with black seat and with white seat) is available via two links (current is marked with thick black underscore). Second link ends with "bertoia-2" (instead of "bertoia-1").
I writed a function loadProductPage(productId) to load the second product without following a link (you can see code in the bottom of page source). If you call this function from console - you will see the problem described (id of second product in DB is 6, for first is 5, so, if you open first link - call loadProductPage(6)).
Thanks in advance.
It's so pitty, 5 days left and nobody helped me with such an easy question. I found a solution by myself. Having no other choice, rather then to explore the JQuery Touch Touch JS code line by line, I noticed that it creates new div's with class "placeholder" inside the div with id "galleryOverlay", no matter if they were creater earlier or not. I mean, it appends new placeholder-divs to existing ones (at the previous call of touchTouch() method), so it breaks the script logic and it cannot load new photos anymore, because of using wrong placeholder-divs.
The solution is to delete previous placeholder-divs before updating photos and thumbnails URL's and before calling touchTouch() method again. With JQuery it is one simple line of code:
$('#gallerySlider .placeholder').remove();
I have a JS photo gallery that loads individual images from an API into the page when users click a thumbnail. I'd like people to be able to add Facebook comments on each image. So I've got my Facebook comments element in the page that contains the gallery.
<div class="fb-comments" data-href="" data-num-posts="10" data-width="480"></div>
On loading the page and first populating the gallery I set the data-href attribute of the comments element to the URL for the first image (for example http://site.com/gallery/1027/1). Then if the user clicks on a thumbnail I reset that attribute to the URL for the selected image.
fbComments.attr('data-href', data.link + index);
FB.XFBML.parse();
The FB.XFBML.parse(); is what I've read you're supposed to do to get Facebook to refresh the comments. I've added a comment to one image and tried clicking on the thumbnail for an image without a comment. But my comment for the first image is still there. Can anyone suggest why?
I've tried logging out the FB object in my JS file, and it logs OK, so it is available at the point I call it. I've checked that the click event in my JS is indeed changing the data-href attribute to the right value. And when I hardcode a different data-href in the fb-comments element the comments render as expected.
I suggest that you completely remove the previous comments box from the dom, then insert a new html with the right data-href and then call the FB.XFBML.parse method.
Another thing is that you should specify where to parse, like so:
FB.XFBML.parse(document.getElementById("container-id"));