Click and Rotate for More Information

Question

Click and Rotate for More Information

Hello everyone, I have a question regarding creating a unique Tumblr theme. My goal is to make the posts rotate on the y-axis when clicked, revealing like and reblog information. Currently, I've been able to achieve this effect on hover by using code from a specific source but now I need assistance in implementing it for click events instead. I've tried some tutorials involving JavaScript and jQuery without success. Can someone kindly guide me through this process in simple terms as I'm new to these programming languages? Your help is greatly appreciated! Below is a snippet of my CSS:

    #f1_container {
  position: relative;
  margin: 10px auto;
  width: 250px;
  z-index: 1;

  perspective: 1000;
}
#f1_card {
  width: 250px;
  transform-style: preserve-3d;
  transition: all 1.3s linear;
}

#f1_container:hover #f1_card {
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  backface-visibility: hidden;
}
.face.back {
  position: absolute; 
  transform: rotateY(180deg);
  background-color: {color:Text};
  width: 250px;
  top: 0;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
}

...and here is an excerpt of my HTML:

{block:Photo}
{block:IndexPage}
<div id="f1_container">
<div id="f1_card">
  <div class="photo"><div class="front-face"><img src="{PhotoURL-250}" alt="{PhotoAlt}"> </div></div> <div class="back face center">
<div class="perm"><span class="like"style="padding-right:7px">{LikeButton color="grey" size="13"}</span> <span class="rb" style="padding-left:5px;">{ReblogButton color="grey" size="13"}</span> <span class="noteslabel" style="padding-right:5px;"><a href="{Permalink}" target="_blank">{NoteCount}</a></li></ol></div>
  </div>
</div>
</div>
{/block:IndexPage}
{block:PermalinkPage} <img src="{PhotoURL-500}" alt="{PhotoAlt}"> {/block:PermalinkPage} {/block:Photo}

Just to give you a glimpse, here's a link to my site: . It might seem messy right now as it's where I test my themes in progress.

javascript jquery html css

Answer 1

Answer №1

It's my understanding that Tumblr does support the integration of jQuery and Javascript. To enable jQuery in your file, simply include this at the beginning:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

After doing this, you can start using jQuery by creating a click function like so:

var r=0;
$(document).ready(function() {
    $('#Image-ID-or-DIV').click(function(){   
        $("#Image-ID-or-DIV").css("transition", "500ms linear all");                    
        $("#imgs").css({transform: 'rotateY(' + (r += 180) + 'deg)'});
    });
});

1) Setting r=0 is crucial for resetting the animation once it completes.

2) The document.ready function is a fundamental part of jQuery, nothing too complex.

3) This snippet indicates that when a specific image with an ID is clicked, a function will be triggered.

4) By specifying the transition duration to be 500 milliseconds, the rotation effect will appear smooth and gradual upon clicking the image.

5) The actual image rotation occurs here based on the specified degree value. Refer to documentation for more details.

If you wish to add additional CSS styling when the image is clicked, you can do so by including:

$("#Image-ID-or-DIV").css('[place your CSS here]')

It's recommended to consult documentation regarding the proper usage of jQuery .css() method.

I trust this information proves helpful to you!

Answer 2

It's my understanding that Tumblr does support the integration of jQuery and Javascript. To enable jQuery in your file, simply include this at the beginning:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

After doing this, you can start using jQuery by creating a click function like so:

var r=0;
$(document).ready(function() {
    $('#Image-ID-or-DIV').click(function(){   
        $("#Image-ID-or-DIV").css("transition", "500ms linear all");                    
        $("#imgs").css({transform: 'rotateY(' + (r += 180) + 'deg)'});
    });
});

1) Setting r=0 is crucial for resetting the animation once it completes.

2) The document.ready function is a fundamental part of jQuery, nothing too complex.

3) This snippet indicates that when a specific image with an ID is clicked, a function will be triggered.

4) By specifying the transition duration to be 500 milliseconds, the rotation effect will appear smooth and gradual upon clicking the image.

5) The actual image rotation occurs here based on the specified degree value. Refer to documentation for more details.

If you wish to add additional CSS styling when the image is clicked, you can do so by including:

$("#Image-ID-or-DIV").css('[place your CSS here]')

It's recommended to consult documentation regarding the proper usage of jQuery .css() method.

I trust this information proves helpful to you!

Answer 3

Answer №2

I believe Ramsay was heading in the right direction by using :focus. To improve, consider enclosing f1_container within an anchor tag like so:

<a href="#" class="focus-wrapper"> <!--also avoid reusing IDs - they should be unique-->
  <div class="f1_container"> 
     <!-- insert code here -->
  </div>
</a>

Furthermore, eliminate any special anchor styles as recommended in HTML Anchor, Disable Style:

.focus-wrapper:hover, .focus-wrapper:visited {
   text-decoration: inherit;
   color: inherit;
   cursor: auto;
}

Create a rule to apply changes on focus:

.focus-wrapper:focus .f1_container .f1_card {
   transform: rotateY(180deg);
}

Don't forget to remove the browser's focus outline:

.focus-wrapper:focus {
   outline:none;
}

If it isn't clear, remember to remove the existing rule that resembles:

#f1_container:hover #f1_card {
   transform: rotateY(180deg);
}

See an example here: http://jsfiddle.net/yb9exv9b/

Answer 4

I believe Ramsay was heading in the right direction by using :focus. To improve, consider enclosing f1_container within an anchor tag like so:

<a href="#" class="focus-wrapper"> <!--also avoid reusing IDs - they should be unique-->
  <div class="f1_container"> 
     <!-- insert code here -->
  </div>
</a>

Furthermore, eliminate any special anchor styles as recommended in HTML Anchor, Disable Style:

.focus-wrapper:hover, .focus-wrapper:visited {
   text-decoration: inherit;
   color: inherit;
   cursor: auto;
}

Create a rule to apply changes on focus:

.focus-wrapper:focus .f1_container .f1_card {
   transform: rotateY(180deg);
}

Don't forget to remove the browser's focus outline:

.focus-wrapper:focus {
   outline:none;
}

If it isn't clear, remember to remove the existing rule that resembles:

#f1_container:hover #f1_card {
   transform: rotateY(180deg);
}

See an example here: http://jsfiddle.net/yb9exv9b/

Click and Rotate for More Information

Answer №1

Answer №2

Similar questions

What is the best approach for loading locally stored images conditionally in Vue.js?

What is causing my nested class to be treated as a sibling rather than a child in HTML code

Utilizing PHP to Extract Information through cURL and HTML Parsing

Experiencing difficulties when attempting to launch a React application and Express/Node.js backend on a shared port

Creating a user authentication portal

Converting HTML divs into a single page PDF document using DinkToPdf

What is the best way to utilize toggle("slide") in order to reveal a message letter by letter?

The Puppeteer software does not automatically shut down the browser once the task is complete

What is the best way to make a panel width adjust automatically to fit the screen width?

Utilizing a Json.Net object within an Ajax request

Eradicating a character from an Object using Jquery/Javascript

Submitting via AJAX upon submission

The functionality of jQuery's onclick event is not functioning as intended

How can I implement disabling buttons for specific IDs in React?

Creating a Custom Select Option Component with Ant Design Library

ways to verify ng-if post modification occurrence

Design a layout consisting of a grid with items that maintain a set maximum width while being evenly distributed across the entire width of the device

Angular: issue with accessing deferred variable within then-method

Improving performance in Next.JS by optimizing unused JavaScript resources

Retrieve only the initial tag content using jquery