Jump to content
BySplitDecision

Different Data in Modals Dynamically

Recommended Posts

Good evening Freaks!

I have a simple HTML page, and in this are around 10 different images. When the images are clicked, I want to display different data (a heading, text and a video) - but using just 1 modal.

I can obviously do this by adding 10 different modals and 10 different sets of data or by using a Database.

---------------

What I was wondering, is there a way that I can have 1 modal, and depending on which image is clicked, show different data - without using a database.

Could I have a simple .txt file, with the 10 different lines of data, separated by a comma or a pipe? And then dynamically read those lines into the modal?

 

For example:

Heading 1 | Text 1 | Video 1

Heading 2 | Text 2 | Video 2

Heading 3 | Text 3 | Video 3

 

I've used databases before and PHP so could do it that way but wanted to keep it simple so I don't have to add entries to phpMyAdmin every time - but I want to keep it very simple and never tried this way before.

Is it possible?

 

Many thanks for your time and answers in advance.

Cheers,

BSD

Edited by BySplitDecision

Share this post


Link to post
Share on other sites

Where you store the data is up to you. But what about the images? Where are those coming from? Are they just written directly into the page?

Wherever those images are coming from, that's where the headings, text, and video (URLs?) should be too.

For the modal, do you already have the markup for it? What is it?

Share this post


Link to post
Share on other sites

Hi Requinix,

Thank you for the reply. 

The images are just added to the HTML like normal, but it's the modal data that needs to be dynamic. 

I've attached a picture of the layout of my images and also the modal which opens upon click. I'm going to add all the different images via the HTML, but for the modals, I don't want to have lots of them - in case I need to add lots more.

The second image attached is the modal data, this needs to be dynamic.

 

Is there a way that when I click the box next to the Unicorn one, I can have the same modal open but with the relevant data? 

Maybe upon click, read a .txt file, find the line relating to that set of data and show that in the modal? Is that the best way to do it, or maybe save the data in a JavaScript array and upon click, find the array ID and do it that way?

What's the best way please?

 

Many thanks in advance,

BSD

 

 

Screen Shot 2019-11-11 at 21.47.47.png

Screen Shot 2019-11-11 at 21.51.04.png

Share this post


Link to post
Share on other sites

The text file is probably not the right way to go with this.

I'm looking for actual markup right now. What is it for the images, and for the modal?

Share this post


Link to post
Share on other sites

Evening Requinix,

Thanks for the reply.

Just coming back to let you know I've wrote something which works well.

The markup for the Modal is: 

<div id="animatedModal" class="popup-modal">
        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
        <div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div>
        <div class="clearfix"></div>
        <div class="modal-content">
            <div class="container">
                <div class="portfolio-padding">
                    <div class="col-md-8 col-md-offset-2">
                        
					</div>
                </div>
            </div>
        </div>
    </div>

I've created 1 array to hold the different sets of Data:

var projects = [];

projects[0] = [];

projects[0][0] = "Simple Glitter Application <br> By Creative Services";
projects[0][1] = "A quick and simple demonstration to show how to apply a fine glitter, this should only be completed at the designated glitter station, remember to tidy up afterwards. If you require glue pens ask the Mocking-up Team in creative support";
projects[0][2] = "mov/SimpleGlitter.mp4";
projects[0][3] = "Supplies:-<br>Glue pen, chosen glitter, a brush and a sheet of A3 paper not card.";

projects[1] = [];
projects[1][0] = "Heading 2";
projects[1][1] = "Description 2";
projects[1][2] = "mov/FoilHotStamper.mp4";
projects[1][3] = "Supplies 2";

projects[2] = [];
projects[2][0] = "Heading 3";
projects[2][1] = "Description 3";
projects[2][2] = "mov/video3.mp4";
projects[2][3] = "Supplies 3";

And this is the jQuery I've done to add the data:

$('#btn-close-modal').click(function(){
		var vid = document.getElementById("video-element");
		vid.pause();
		vid.currentTime = 0;
		$('.modal-content .container .portfolio-padding .col-md-8.col-md-offset-2').empty();
	});
	
	$('.portfolio_item').click(function(){
		
		var id = $(this).attr('id');
		id = id.match(/\d+/);
		
		var theData = "";
		
		theData = "<h2>" + projects[id][0] + "</h2>";
		theData += "<p id='description'>"+ projects[id][1] + "</p>";
		theData += "<video controls width='640' width='480' data-type='video' data-offsetY='2400' data-speed='1.5' id='video-element'>";
		theData += "<source src='" + projects[id][2] + "' type='video/mp4' />";
		theData += "</video>";
		theData += "<p id='additional-info'>" + projects[id][3] + "</p>";
		
		$('.modal-content .container .portfolio-padding .col-md-8.col-md-offset-2').append(theData);
		
	});

 

Thank you for responding.

Am I able to mark this as 'completed' or 'answered' my end?

Cheers,

BSD

Share this post


Link to post
Share on other sites
10 hours ago, BySplitDecision said:

Am I able to mark this as 'completed' or 'answered' my end?

Unfortunately not. We used to have that ability, but the current version of the forum software doesn't offer it anymore. Replying that you have an answer is fine.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.