Formatting text within a .js file, and other javascript questions

JavaScript
1

First and foremost, I want to state that while I have a basic understanding of javascript, I’m still fairly new to it, so any assistance or advice is greatly appreciated.

I’ve recently been going through the process of redesigning my website to include some jquery functionality, mainly the use of a background image slider as my primary ‘pages’ for my website. All of the work I’ve put in so far has been based off of the great background slider by Marco Kuiper, and uses portions of his original code.

As I was working along with my redesign, I hit a bit of a snag that I can’t seem to get past it… Each slide contains a nav bar with text information about that specific slide. As Marco’s original code tried to minimize html and keep everything on the css and js side, all of the text for these slides is contained within JSON strings and values within the script.js file (example below).

{
		"title" : "Aperture",
		"cssclass" : "cam",
		"image" : "bg_cam.jpg",
		"text" : "In optics, an aperture is a hole or an opening through which light travels. More specifically, the aperture of an optical system is the opening that determines the cone angle of a bundle of rays that come to a focus in the image plane. The aperture determines how collimated the admitted rays are, which is of great importance for the appearance at the image plane. If an aperture is narrow, then highly collimated rays are admitted, resulting in a sharp focus at the image plane.",
		"url" : 'http://www.sxc.hu/photo/1270466',
		"urltext" : 'View picture'
	},

I’ve been trying to modify this text to include standard html-style elements like <i> and <b>, and font color changes outside of the css, but when I make these changes they simply don’t have any effect on the front end version of the design (see the example below):

Is there any way that I can modify this text to include these sort of element changes while it is still contained within the .js file?

Additionally, I am interested in trying to add content (mosiac-style blocks, contact forms, etc.) on top of the backgrounds, but need it to stay specific to certain slides (portfolio work, contact page, etc.). Is this possible with this time of image slider?

Thanks in advance for all of the help and assistance.

2

Hi one.relic. Welcome to SitePoint. :slight_smile:

I’m not qualified to answer your question, but I’ll just pick up on this point:

original code tried to minimize html and keep everything on the css and js side, all of the text for these slides is contained within JSON strings and values within the script.js file

It’s not a good idea to place page content in a JS file instead of in the HTML. It makes the content very inaccessible, and search engines won’t see it either. So I would re-think that strategy.

3

Thank you for the suggestion Ralph, it’s greatly appreciated. I’ve actually been thinking the same thing honestly, I’m just not sure exactly how to put the page content back into the html file while still maintaining the same look/feel to the js.

4

I’d suggest getting an alternative that is built as I’ve suggested. Indeed, all the examples of this I’ve seen have the content in the HTML. Could you perhaps just use that Mosaic script you linked to? Does it do what you want? If not, could you describe how you want the page to work? I’ve bookmarked quite a few gallery scripts like this, so I might know of something that does what you want.

E.g. Something like Supersized might fit the bill better.

5

could you describe how you want the page to work?

Absolutely. Let me go into a bit further detail to see if it makes sense…

I’m re-building my personal portfolio website from the ground up. I want it to have four main [i]pages(/slides)[i]:

• Welcome
• About
• Work/Portfolio
• Contact

I would love for each of the pages/slides to look and act as they do in the original slider link that I posted.

Then on each page/slide, I want to have the ability to add additional content as needed, ie.: Resume and any pertinent information on the ‘about’ page, portfolio samples and text descriptions on the portfolio page, contact form and ‘follow’ links on the contact page.

I hope that makes a bit more sense about what I am trying to achieve.