I've created a lightbox function which loads over the top when a user clicks on a post link in the archive. The overlay needs to display images and short paragraphs of text in a slideshow style (with next and prev buttons), those fields are created with as Advanced Custom Fields flexible repeater.
I'm using JS to .append() a div to the body and I need to then query the post, by ID I guess, within my js to fetch the first value from that ACF repeater, then second, then third and so on, when the next/prev buttons are hit. I'm thinking that I could perhaps quickly grab an array of those values when the lightbox is loaded and then cycle through them, but am not sure where to start.
What I don't want to do is simply .load() the post, headers and all, into the lightbox, just the images (and short peices of text) one at a time.
Any pointers greatly appreciated.
I've got around this issue by storing the information that I need in an array during the initial loop so that when the user clicks on the post I .append() an overlay to the body and then create a slide for .each() of the nodes in that array. The information displayed in each slide is pretty minimal in this case, just an image or a single line of text so this solution works more efficiently than querying the database on each click or lightbox load.
Related
Is it possible to animate a div, or any other HTML element on a page refresh using jQuery or a similar web technology?
I am thinking something like the Google Photos search box animation.
When clicking the input, the element remains, while the rest of the page fades out and the URL changes. Then the new elements fade in.
This has to be possible by telling the browser somehow that an element should remain on the page after a request and providing the information, that it is the same as the other element loaded with the request.
This is the combination of two things:
Typical animation (you can do that with jQuery by adding classes and leave animation to CSS or use jQuery Animations https://www.w3schools.com/jquery/jquery_animate.asp)
History API (https://developer.mozilla.org/en-US/docs/Web/API/History_API) you can manipulate with URL
I want to dynamically click on a set of unordered list items without displaying the results of the clicks. The intent is to pre-load dynamic content such as images and text that clicking on the list items will normally load and display; I want to preload the content as much as possible before the user begins to click on list items. (I've inherited code from another developer and I'm having to work within the constraints of his routine, so please bear with me.)
Each list item has an ID, like:
id="w273"
id="w175"
id="w123"
These would be my references. The list items are generated dynamically, and each contains an HREF to content that will be displayed in a hashed area of the page (the content consists of server-loaded images and text extracted from a SQL database using a query).
Normally, clicking on a list item changes the content in that area of the page, but it takes time to load. Once it's loaded, though, it can be redisplayed without reloading, of course, and so revisiting it is instantaneous...it's the initial visit that takes time.
I'd therefore like to pre-load all of that content by dynamically clicking on each of the list items in succession without displaying the resulting content, all done in the background, leaving the default content (which is automatically retrieved using the first ID in the click-list) in place. (I mention this detail to explain that the page loads initially with the first list item's content displayed, and that behavior should remain unchanged.)
How could I accomplish this with Javascript or JQuery?
MORE INFO
Okay, here's the skinny. The content is informed by a major containing php script that houses content from an inner php script. The outer script creates an image carousel whose thumbnails reference the inner script as hashes. At any given point, the URL will take this form:
g.php?g_id=45#a.php?a_id=238
The outer script is the "g.php" script. It references a thumbnail image in the carousel identified by the "a.php" script whose GET value is the key to loading the inner content on the page.
The individual thumbnails in the carousel are HREF'd like this:
<li><img src="thumb_image.jpg" /></li>
So clicking on this one would revise the previous URL to:
g.php?g_id=45#a.php?a_id=467
Notice, though, that the content generated by the "g.php" script doesn't change, therefore. The inner "a.php" content switches as a hash change when its corresponding thumbnail in the carousel is clicked. It's a surprisingly effective solution, with a few caveats.
The main caveat is that nothing is preloaded except the content referenced by the first link (which corresponds to the first thumbnail in the carousel), and that behavior is hard coded into the routine and is fine.
I simply want to dynamically click each link in the list to load all of the content, and to do it in the background after the page has loaded with the first link's content exposed (which is its default behavior, and, as I've said, which is fine). And it must be done invisibly.
It also doesn't matter in what order it happens, because the user might immediately advance the carousel and click on the 14th element in it rather than the 2nd element. So, I don't want to preload the content in batches of 10 or similar increments, waiting for the user to interact with the carousel to load more content; that makes no sense, provided the design of the carousel and how it is intended to be used in any non-sequential manner.
I simply need to loop through all of the list item links and load them invisibly—in whatever sequence they should happen to load, provided the asynchronous nature of AJAX. More than likely, the user will click on one of the links that has been preloaded by the preloading routine, but if the user jumps ahead and selects something that's still in the process of preloading, that's not a problem; by the time the user has examined that content, the rest of the content will have been preloaded.
So, that's more info. I hope this provides a better backdrop for understanding what I'm up against. Without completely rewriting the entire routine, the best bet seems to be to accept its own mechanism and accommodate it by looping through an AJAX/JQuery routine that dynamically clicks and preloads all the data in the background once the page has displayed its initial content. And I do have access to the IDs of the links in the unordered list; other identifying information could easily be added to it.
Text is not an issue, what could be an issue is the async loading of many large images - that might not start loading in the desired order.
It would be a nice idea not to load your images somewhere hidden inside the document, but instead get from the server a JSON holding all the needed data.
You don't need to emulate clicks on all your list one by one,
you need to simply get i.e: the first 10 images, and as the user advances, load more and more (here the idea is to avoid loading stuff that the user might never explore/see/use) - but it all depends on the User Interface you have.
JSON example:
[
{
"id" : "w125",
"image" : "path/to/image1.jpg",
"content" : "HTML or whatever"
},{
"id" : "w275",
"image" : "path/to/image2.jpg",
"content" : "HTML or whatever is the content"
}
]
What I am looking to do is have a notification numbers show in the top right corner of my site, that when a user clicks it, it opens up a notification menu or even a pop up box that says the notification. How can I code that? Thanks!
If you can use jquery, there are many:
http://medleyweb.com/web-dev/10-great-jquery-notification-plugins
For all the tastes!
Cheers.
Some ways you can do that:
1.) If the data or notification details are in the database, then you can just COUNT the ROWS that are untapped or not seen (you can do this by having a "status" column which identified if the row/notification had already been seen or not) by that specific user, its better that every notification must be saved in the database.
2.) Put the COUNTED ROWS you fetch from the database inside a div tag and declare an Id in it.
3.) When you already fetching the right data, then put the correct CSS/styles where you want to put the notification number including the property z-index:100;.
4.) Same goes with the pop up box, when the user click the div tag, first hide the div tag for notification numbers, then you must fetch all the data from the database putting in inside another div tag with CSS for notification details.
5.) This can be done greatly with javascript and jquery.
Jquery is also great in communicating to server, use it for real time purposes :)
Hope this helps :)
I want to create a gallery where the images link directly out to the website in a new window when clicked.
However I would also like a view (or click to be more descriptive) count to show overlayed on the image on hover.
How do I do about creating the link/view count? Since no page is actually loaded - only a link clicked?
On top of that I would also like to use a custom short URL service. Does anyone know one that is good and/or would have a solution to my problem?
Cheers!
I've made a TODO list for you :)
[JS/AJAX] catch the click event and send a message to the server what was clicked
[PHP/ROR/Python/etc] store information in the DB (increment the clicked element counter)
[PHP/ROR/Python/etc] when page is loaded, retrieve counter values from DB and put them into the HTML
[JS] use counter values to display them over images
As for short URL services I like goo.gl .
I'm using the jQuery slideshow plugin, and my 'slideshow' div naturally contains a handful of images. My objective is to add the ability for a user to rate the image, using either a radio or select widget.
Since I'm not using a sophisticated back end, the widget for each image must be generated on the fly in jQuery.
Each of the child elements of the slideshow div are naturally imgs, so it isn't clear to me how to append a form field to it using jQuery.
Thanks much in advance.
Wouldn't mind some html to give you a better answer:
try:
$('img').after('<input type="radio">'); //with realtion to your image
$('img').parent('div').after('<input type="radio">'); //with relation to the parent div
For starters...you could also try .appendTo, .add, .append...it depends on your container and how you want it displayed....Post some html for an exact answer. maybe even .before, .prepend, etc...again depending on what you really want to do...
I agree with karim, look those tags up to see which is best for you (i.e. do you want it in your div after your div, etc.)