What is the best way to adjust the picture dimensions when switching to a different image?

I've been working on creating a slideshow using CSS, HTML, and Javascript. Everything seems to be running smoothly, but I've noticed that when I click on the next or previous buttons, the current image enlarges and lingers on the screen for a few seconds. Although I've set the width of the images in my CSS to 100%, I suspect that the issue may be related to margins, even though they don't appear to be the source of the problem.

Below is some code snippets that might provide more insight into the issue:

figure
{
    position:absolute;
    opacity:0;
    transition:1s opacity;
    margin:0;
    border-left:solid 2px black;
    border-right:solid 2px black;
}

figure.show
{
    opacity:1;
    position:relative;
    transition:1s opacity;
    margin-right:15%;
    margin-left:15%;
}

Another issue I've encountered is a gap between the image and the bottom div. Interestingly, I haven't experienced this problem while working on c9.io, which makes me wonder if there's something specific to CodePen that is causing it.
You can view the code here: http://codepen.io/iikinz/pen/BiLeJ

javascripthtmlcssslideshow

Answer №1

Your images are increasing in size because you have removed the show class, which includes margins.

Try moving the following CSS properties:

margin-right:15%;
margin-left:15%;

from figure.show to just figure.

--UPDATE-- Here is the updated codepen link: http://codepen.io/anon/pen/Cuikc

--UPDATE-- This solution works for most of your images, but there are a couple that appear smaller than the rest when changing slides. To ensure consistency and clarity, it would be best to make sure all images are the same size.

Answer №2

Regarding the space below the image, it is being displayed inline:

img {
  display: block; /* This will eliminate the gap at the bottom */
  width: 100%;
}

Concerning the size of your images:

To resolve this issue, ensure all images are the same size. Alternatively, you can adjust them using CSS.

figure img {width:1280px;height:960px;margin-right:15%;margin-left:15%;}

In regards to transitions and more, my suggestion would be to continue learning and improving. It may seem overwhelming to address everything in one question.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Calculating the total value in a Laravel database

Is there a way for me to calculate the number of apartments in a project based on the floor they are located on? This is db $table->id(); $table->unsignedBigInteger('project_building_id')->nullable(); $table->unsignedBigInteger(&apos ...

javascriptphpmysqllaravelvue.js

Would it be feasible to activate internal routing for the displayed HTML content rather than having to refresh the entire page?

Receiving an HTML string from the server presents a challenge due to constraints in modifying its format, particularly in a legacy system. However, there is a need to display this HTML content in the DOM. To address this issue, the bypassSecurityTrustHtml ...

javascriptangular

Having difficulty implementing dynamic contentEditable for inline editing in Angular 2+

Here I am facing an issue. Below is my JSON data: data = [{ 'id':1,'name': 'mr.x', },{ 'id':2,'name': 'mr.y', },{ 'id':3,'name': 'mr.z', },{ & ...

javascriptangulartypescript

Triangles in Three.js fail to render

Here's the complete code snippet: http://jsfiddle.net/YzR33/ My goal is to create triangles and assign colors to each vertex. However, I'm encountering an issue where certain triangles are not being displayed when specific coordinates are set. ...

javascriptthree.jswebgl

Nested SetTimeout function fails to execute

Attempting to implement a button that provides feedback for its actions, I am faced with a challenge in Angular. After sending a put request to the server, the button's state changes to show this action. Upon receiving a response, the button's st ...

javascriptangularjs

What is the best way to handle both local and global ajax events in jQuery?

After recently transitioning from Prototype to jQuery, I am encountering some challenges. My application involves multiple AJAX requests, where I want certain global events to take place in 95% of cases, such as displaying or hiding a loading indicator. A ...

javascriptjqueryajaxjquery-events

Is React the best solution for managing a lengthy list that requires constant data updates?

In order to display a long list with over 2000 entries that changes dynamically, I am utilizing react redux. Each second, at least one new row is added to the list data. My current approach involves mapping through the list data in the render method like t ...

javascriptjqueryperformancereactjsredux

What is the process for invoking a page using a JavaScript function?

My index.php has a javascript code that calls a page in the following way: id = 5; var url = 'pages/pg/'+id+'/'; f.action = urlss.toLowerCase(); return true; The issue arises when I try to call the same page with a different ID, it do ...

javascriptphpajax

Adding additional text will not render d3.js' output

I'm struggling with a simple issue here, My goal is to add a div to my svg element containing text. I have written the code for this and in the DOM, it shows that the svg has the correct class attached along with the desired text. However, the text i ...

javascriptd3.jssvg

Input field with read-only property enabled

In my scenario, I want the input field fines to become read-only when the value of the status field is set to Paid. How can I make this happen? Here's the form structure: Take a look at the code snippet below: <div class="form-group" ...

javascriptphphtmljquerycss

React Component: Issue with toggle functionality in child component not meeting expectations

I'm currently working on a checkbox user interface, where I need to pass a toggle function down to a list component. The issue I'm facing is that while I can check the checkbox successfully, I'm unable to uncheck it for some reason. Below i ...

javascriptreactjs

Tips for creating a sequence pattern in JavaScript or jQuery resembling 12345-1234567-8

I am looking to adjust this code so that a hyphen "-" is automatically inserted after every 5 characters, and then again after every 7 characters. Currently, the code only inserts a hyphen after every 5 characters. <html> <head> <scri ...

javascriptphpjquery

Design your own unique HTML webpage

My goal is to create a screen using divs that includes a big div which aligns with the month of October. This big div should be movable across the months, and when it stacks on a specific month, a form should be submitted. I am seeking assistance with po ...

htmlcss

What is causing the columns in Foundation 6 to not align next to each other?

At 1090px screen width or in tablet mode, the columns do not align side by side and instead one is pushed down creating a white space between them. I am using Foundation 6 with 12 columns, but it does not work well on medium-sized screens; it only function ...

htmlcsszurb-foundation-6

Altering the src attribute of an Iframe in real-time

Local storage value needs to be passed into iframe URL using proper syntax. The code snippet below demonstrates the attempt: <script> // Get value from localstorage var x = localStorage.getItem("firstname"); // Display alert with stored val ...

javascriptjquery

Ways to modify CSS rules by adding or removing the !important declaration in new CSS

For my project, I am using the `bootstrap-next-table` table in various places and have customized a CSS class to fit my needs. The issue I am currently encountering is that one component requires the default CSS class which I had overridden: .table > t ...

cssreactjsbootstrap-4

Storing distinct values in separate variables within a JavaScript for loop

I'm attempting to assign various values generated by an outer loop to different variables and then utilize those variables as an array. var code = []; for (i = 0; i < 5; i++) { code[i] = mp3; } Is there a way to access variables in this manner ...

javascriptarrays

IMG creates scroll bars even when width is set as percentage

In a previous discussion about how padding is calculated when using percentages (%), it was mentioned that the padding is determined based on the parent element's width. Now, I have come across the following CSS assignment: .img_tutorial_full_width ...

htmlcss

What is the best way to modify foundation's small, medium, and large breakpoint values?

I am currently customizing a Drupal theme child that incorporates the Foundation framework from its parent theme. The predefined breakpoints in the Foundation classes and attributes do not perfectly align with the design of my website. Can anyone provide ...

cssmedia-querieszurb-foundation

Creating a Social Media Platform with JavaScript, Bootstrap, JQuery, PHP, and Mysqil

I am currently in the process of developing a social networking platform that will have similar features as Instagram. Users will be able to log in, create posts, leave comments, like content, share posts, and send data to a server for storage or display p ...

javascriptphpjquerymysqlisocial-networking