11 Replies - 576 Views - Last Post: 31 July 2015 - 09:55 AM

#1 morecrow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-July 15

Problems with carousel (javascript code from template

Posted 30 July 2015 - 10:07 AM

Hello everyone at dreamincode, as this is my first thread, I would like to thank anyone who helps in advance! On to the problems..

(Skip this paragraph if you aren't interested in reading some background of the situation...)
I am interning for a company who has no IT group and no tech workers of any kind, so as you'd expect I get little guidance and no help. I have more experience with Java than any other language (from school) but I saw the job posting and took it anyway just for experience, and I had played with some html and css code and it didn't seem too hard to comprehend. I bought an html template that came with some html, css, and javascript code that seemed to fit the bill nicely, and away I went. I've pieced together most of the pages they want to see with code that came in the template and even some of the 'stock' pages fit nicely with what I needed I just had to replace content.... blah blah blah

(problem...)
My problem is with a javascript "carousel" gallery feature I am wanting to use to display individual carpet type's and all of their colors. As silly as it probably sounds to you, I can't figure out how to get the carousel's next and prev 'buttons' to increment by 1 instead of 4. There are 8 pictures in the template version and four of them are displayed. When you click next or prev it moves the 4 shown and shows the next 4 pictures (of the 8). I also would like to be able to change a main, large, image to one clicked on in the carousel, kind of the same concept as a thumbnail gallery I guess.

(What I've tried...)
I have found the source code and this method looks like it could be the culprit
    // Carousel Options
    itemWidth: 0,                   //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
    itemMargin: 0,                  //{NEW} Integer: Margin between carousel items.
    minItems: 0,                    //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
    maxItems: 0,                    //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
    move: 0,                        //!!!!!!!!THIS'N :)/>/>/>/>/> {NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
, but when I change the number in the .js file nothing happens, and when I add it to the js code in the html file weird things happen (like all of the 'thumbnails' from the carousel displaying in non carousel format). I've tried adding "move: 1," to line 27 but I've had no luck. Had I had more time with this project I would've learned more about Javascript but taking calculus 2 and trying to work with 'new to me' code this summer has been pretty difficult, but I need the experience. That being said, I don't have much experience with Javascript so I could be looking in the wrong places, but any help or guidance will be much appreciated.

Here is the html code...
<!-- CALL CAROUSEL LIST -->
<script type="text/javascript">
	$(window).load(function(){			
				$('#recent-projects').carouFredSel({
					responsive: true,
					width: '100%',
					auto: false,     //controls auto slide
					circular	: true,
					infinite	: false,
					prev : {
						button		: "#car_prev",
						key			: "left",
							},
					next : {
						button		: "#car_next",
						key			: "right",
								},
					swipe: {
						onMouse: true,
						onTouch: true
						},
					scroll : true,
					items: {
						visible: {
							min: 4,
							max: 4,
							//move:1
						}
						
					}
				});
			});	


The Javascript file is attached as well. Thanks again for any help or guidance! :)

Is This A Good Question/Topic? 0
  • +

Replies To: Problems with carousel (javascript code from template

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: Problems with carousel (javascript code from template

Posted 30 July 2015 - 11:16 AM

Without seeing the rest of the code that uses that setting, the comments make it sound like that's the one to change. If changing it causes unusual behavior in the browser then I would suggest checking the developer console for any error messages.
Was This Post Helpful? 0
  • +
  • -

#3 morecrow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-July 15

Re: Problems with carousel (javascript code from template

Posted 30 July 2015 - 11:43 AM

View PostArtificialSoldier, on 30 July 2015 - 11:16 AM, said:

Without seeing the rest of the code that uses that setting, the comments make it sound like that's the one to change. If changing it causes unusual behavior in the browser then I would suggest checking the developer console for any error messages.


Sorry I thought I attached the .js file with all the code in it, I guess that didn't work because I don't see it either. D:
I tried to add it in my post but I got a "too many emoticons" error.. also, that move: number 'method' (i'm guessing its a method) doesn't do anything when changed where I showed it, but it does do crazy things outside of that written on its own.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: Problems with carousel (javascript code from template

Posted 30 July 2015 - 02:09 PM

Quote

I tried to add it in my post but I got a "too many emoticons" error

That's a bug with the forum, it's the same bug that caused the error in your comments in your first post. It should be fixed relatively shortly though.

Quote

but it does do crazy things outside of that written on its own.

Again, if "crazy things" are happening then that sounds like an error, and you need to check your browser's developer console for error messages. I can't guess what the error is without seeing the changed code or the error message.
Was This Post Helpful? 0
  • +
  • -

#5 morecrow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-July 15

Re: Problems with carousel (javascript code from template

Posted 30 July 2015 - 05:30 PM

I will check that out and report back with a screenshot or just the messages.

This post has been edited by andrewsw: 31 July 2015 - 12:55 AM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#6 morecrow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-July 15

Re: Problems with carousel (javascript code from template

Posted 30 July 2015 - 05:56 PM

Uncaught SyntaxError: Unexpected identifier

I the error above when I did this in the html file...

<script type="text/javascript">
	$(window).load(function(){			
				$('#recent-projects').carouFredSel({
					responsive: true,
					width: '100%',
					auto: false,     //controls auto slide
					circular	: true,
					infinite	: false,
					prev : {
						button		: "#car_prev",
						key			: "left",
							},
					next : {
						button		: "#car_next",
						key			: "right",
								},
					swipe: {
						onMouse: true,
						onTouch: true
						},
					scroll : true,
					items: {
						visible: {
							min: 4,
							max: 4,
						}
						move:1, //ADDED MOVE HERE
					}
				});
			});	
	</script>


When I add move: num inside visible... I get this message *its not an error it comes up under 'logs'. carouFredSel: Set a width for the items!

.
.
.
scroll : true,
					items: {
						visible: {
							min: 4,
							max: 4,
							move:1,
							}
					}


By the way, do changes to my html page, when talking about Javascript, come from the <script> written in the html file or from the actual .js file? Or both? Thanks for the help by the way, I've spent a couple of days trying to figure this out and use other situations I've found from searching online and have had no luck. So having some help and guidance is AWESOME!
Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: Problems with carousel (javascript code from template

Posted 31 July 2015 - 08:43 AM

Should it go inside or outside of the visible object? The syntax error is because you're missing a comma before the line you added. It looks like there is an itemWidth property in the first code you posted, it may expect that. I'm not sure if you would call that width or itemWidth or where you would put it in your config object though, I can't tell where that would go without seeing all of the code that runs it or maybe there is documentation online that tells about how to set it up.

Quote

By the way, do changes to my html page, when talking about Javascript, come from the <script> written in the html file or from the actual .js file?

All of the code runs in the same scope, any of it can do anything.
Was This Post Helpful? 0
  • +
  • -

#8 morecrow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-July 15

Re: Problems with carousel (javascript code from template

Posted 31 July 2015 - 09:29 AM

I figured out why the file didn't attach the first time... I didn't see the attach this file button. :sigh: It has all of the .js code that runs the carousel and there are comments to let you know what is what. The code I attached from that file starts at line 1177 in notepad ++, if that helps.

Attached File(s)


Was This Post Helpful? 0
  • +
  • -

#9 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: Problems with carousel (javascript code from template

Posted 31 July 2015 - 09:42 AM

Not that I don't enjoy reading through 3800 lines of code or anything to see how it works, but is there any documentation for how to use this? That would be the place to start.
Was This Post Helpful? 0
  • +
  • -

#10 morecrow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-July 15

Re: Problems with carousel (javascript code from template

Posted 31 July 2015 - 09:45 AM

View PostArtificialSoldier, on 31 July 2015 - 09:42 AM, said:

Not that I don't enjoy reading through 3800 lines of code or anything to see how it works, but is there any documentation for how to use this? That would be the place to start.


Sorry about that.. I keep forgetting to add things. probably what you're looking for
Was This Post Helpful? 0
  • +
  • -

#11 morecrow  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-July 15

Re: Problems with carousel (javascript code from template

Posted 31 July 2015 - 09:52 AM

View Postmorecrow, on 31 July 2015 - 09:45 AM, said:

View PostArtificialSoldier, on 31 July 2015 - 09:42 AM, said:

Not that I don't enjoy reading through 3800 lines of code or anything to see how it works, but is there any documentation for how to use this? That would be the place to start.


Sorry about that.. I keep forgetting to add things. probably what you're looking for


Wait, I think that is for a completely different object. I think I'm just going to keep trying to change different things until something works. If I don't get it I think it will still work so its not a big deal, but after looking having someone help with this for nothing is too much to ask cause this piece of code is so huge and the guy that did the template didn't really divide it up too well. Thanks for your help though, I've learned some stuff from looking. :bigsmile:
Was This Post Helpful? 0
  • +
  • -

#12 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: Problems with carousel (javascript code from template

Posted 31 July 2015 - 09:55 AM

Based on your code and the error message, you're looking for "carouFredSel", which starts with the comment on line 305 of your file. The code on line 319 is packed, unpacking it shows that it's minified also. So, it's not much help to have that code, but the comments have this URL:

caroufredsel.frebsite.nl
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1