Response title
This is preview!
Newbie question
in Using jQuery
•
10 years ago
I am using the toggle function in a Wordpress website to show/hide an overlay on mouseover on post images on an archive page. I feed IDs (that are based on the post ID) into the functions because there are often more than one image on a page, but that means I have to create a new function every time there's a new post... at least the newbie way I've been doing it.
I know there must be a way to do it with an array, but I have no idea what the post ids will be until the posts are made. I know there has to be a better way than what I've done so far, and I was hoping the forum would be able to help.
Here's the jQuery code so far:
- // home-image-1
- $(function() {
- $("#home-image-91").hover(
- function() { $("#overlay-91").toggle(); }
- );
- });
- // home-image-2
- $(function() {
- $("#home-image-93").hover(
- function() { $("#overlay-93").toggle(); }
- );
- });
- // insectum category
- $(function() {
- $("#home-image-6").hover(
- function() { $("#overlay-6").toggle(); }
- );
- });
- // project #1 category
- $(function() {
- $("#home-image-7").hover(
- function() { $("#overlay-7").toggle(); }
- );
- });
- // new work category
- $(function() {
- $("#home-image-12").hover(
- function() { $("#overlay-12").toggle(); }
- );
- });
And here's the archive code:
- <?php
- $categories=get_categories('child_of=3');
- foreach($categories as $category) {
- $posts=get_posts('showposts=1&cat='. $category->term_id);
- if ($posts) {
- echo "\t\t\t\t<div class=\"home-image\" id=\"home-image-" . $category->term_id . "\">\n";
- echo "\t\t\t\t\t<div class=\"overlay\" id=\"overlay-" . $category->term_id . "\"><a href=\"" . get_category_link( $category->term_id ) . "\" title=\"" . sprintf( __( '%s' ), $category->name ) . "\"" . ">" . $category->name . "</a></div>\n";
- foreach($posts as $post) {
- setup_postdata($post);
- the_post_thumbnail('medium');
- } // foreach($posts
- echo "\t\t\t\t</div>\n";
- } // if ($posts
- } // foreach($categories
- ?>
Thanks.
1