Skyrider in search for an Image Gallery Script

Skyrider

Skyrider
Base belongs to me.
👑 Administrator
🌠 Staff
✔️ HL Verified
🚂 Steam Linked
💎Légéñdārý
Joined
Nov 30, 2002
Messages
10,867
Best answers
0
Location
Netherlands
Hey guys,

I'm in search for an Image Gallery script much like this one:
http://www.samsung.com/nl/consumer/.../NP-R520-JS01NL/index.idx?pagetype=prd_detail

Check out the laptop images with the arrows. I'm looking for such gallery. I've seen looking on quite a lot of script sites, but couldn't find any. Mind helping out? Maybe a freeware/shareware software that does this with a simple copy/paste on the website? Any information is welcome.
 

Sicron

Sicron
New Member
✔️ HL Verified
💻 Oldtimer
Joined
Mar 29, 2003
Messages
4,765
Best answers
0
Location
The Netherlands
It's made using Javascript. Just open the source of the website and start copy-pasting. :p Javascripts can almost always be 'stolen' from a website (technically, it isn't really stealing at all, there is no copyright on it whatsoever).


Code for the actual buttons:

HTML: 
<div class="visual_sum_tab">
						<a href="#" class="btn_pre" name="img_kv_visual_btn"  onclick="s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');viewPrvGalleryPage(); return false;">&nbsp;previous</a>
						<div id="visual_sum_tab">
							
						
						</div>
						<a href="#" class="btn_next" name="img_kv_visual_btn" onclick="s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');viewNextGalleryPage(); return false;">&nbsp;next</a>
					</div>


Part of the code for the images:

HTML: 
<div class="gallery_layer_image">
						<div style="margin: 0pt auto; width: 710px; height: 525px;" id="flashObj">
							<script type="text/javascript">
								//<![CDATA[
								function flash_gallery_color(selectNum,colorBloorean,colorSelectNum) {

									document.getElementById('divGalleryPop1').style.display='block';
									document.getElementById('divGalleryPop2').style.display='block';
									var flashObj = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="gallery" name="gallery">';
									flashObj = flashObj + '<param name="movie" value="/nl/flash/consumer/gallery.swf" />';
									flashObj = flashObj + '<param name="wmode" value="transparent" />';
									flashObj = flashObj + '<param name="allowScriptAccess" value="always" />';
									flashObj = flashObj + '<param name="flashVars" value="xmlUrl=/nl/consumer/detail/galleryXML.do?model_cd=NP-R520-JS01NL&amp;disMod=L&amp;selectNum='+selectNum+'&amp;colorSelectNum='+colorSelectNum+'&amp;colorBloorean='+colorBloorean+'" />';
																								 
									flashObj = flashObj + '<!--[if !IE]>-->';
									flashObj = flashObj + '<object type="application/x-shockwave-flash" data="/nl/flash/consumer/gallery.swf" width="100%" height="100%" id="gallery" name="gallery">';
									flashObj = flashObj + '<param name="wmode" value="transparent" />';
									flashObj = flashObj + '<param name="allowScriptAccess" value="always" />';
									flashObj = flashObj + '<param name="flashVars" value="xmlUrl=/nl/consumer/detail/galleryXML.do?model_cd=NP-R520-JS01NL&amp;disMod=L&amp;selectNum='+selectNum+'&amp;colorSelectNum='+colorSelectNum+'&amp;colorBloorean='+colorBloorean+'" />';
									flashObj = flashObj + '</object>';
									flashObj = flashObj + '<!--<![endif]-->';
									flashObj = flashObj + '</object>';
									document.getElementById('flashObj').innerHTML = flashObj;
								}
							//]]>
							</script>
						</div>
Part of the Javascript for the buttons, though it may be missing parts, you'd have to try it out:

HTML: 
				<script type="text/javascript">
				//<![CDATA[
					var galleryBeginPage = 1;
					var galleryEndPage = 0;
					var galleryCurrentPage = 1;
					var galleryCountPerPage = 5;
					var stageImageCount = 0;
					var stageImageList = new Array();
					
					var kvImageCount = 11;
					var kvImageList = new Array();
					
					
						
							
							
								kvImageList[0] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_01.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_01.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
						
							
							
								kvImageList[1] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_02.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_02.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
						
							
							
								kvImageList[2] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_03.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_03.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
						
							
							
								kvImageList[3] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_04.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_04.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
						
							
							
								kvImageList[4] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_05.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_05.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
						
							
							
								kvImageList[5] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_06.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_06.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
						
							
							
								kvImageList[6] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_07.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_07.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
						
							
							
								kvImageList[7] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_08.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_08.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
						
							
							
								kvImageList[8] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_09.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_09.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
						
							
							
								kvImageList[9] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_10.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_10.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
						
							
							
								kvImageList[10] = "<a href=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_medium_11.jpg\" class=\"sum_btn0#_INDEX_#\" onclick=\"s_control_click ('products,events', 'event43', ';NP-R520E,event43', 'o', 'Product Image Usage');gallery_view3(this); return false;\" ><img src=\"/nl/system/consumer/product/2009/12/11/np_r520_js01nl/R520_xsmall_11.jpg\" height=\"60\" alt=\"R520 JS01\" /></a>";
							
							
						
						
					
					
					var colorImageCount = new Array();
					var colorImageTagList = new Array();
					
					var colCount = 0;
					
					
					function viewGalleryPage(page) {
						var visual_sum_tab = document.getElementById("visual_sum_tab");
						var thumbnail_tag = "";
						var idx = 1;
						
						visual_sum_tab.innerHTML = "";
						
						for (var xFI = ((page - 1) * galleryCountPerPage); xFI < (page * galleryCountPerPage); xFI++) {
							thumbnail_tag = stageImageList[xFI];
							visual_sum_tab.innerHTML += thumbnail_tag.replace(/#_INDEX_#/g, idx);
							
							if ((xFI + 1) == stageImageCount) {
								break;
							}
							
							idx++;
						}
						
						galleryCurrentPage = page;
					}
					
					function viewNextGalleryPage() {
						if (galleryEndPage != 0) {
							if (galleryCurrentPage == galleryEndPage) {
								viewGalleryPage(galleryBeginPage);
							} else {
								viewGalleryPage(galleryCurrentPage + 1);
							}
						}
					}
					
					function viewPrvGalleryPage() {
						if (galleryEndPage != 0) {
							if (galleryCurrentPage == galleryBeginPage) {
								viewGalleryPage(galleryEndPage);
							} else {
								viewGalleryPage(galleryCurrentPage - 1);
							}
						}
					}
		
					var objImgKvVisualBtn = document.getElementsByName("img_kv_visual_btn");
					
					function displayKvBtn(pageCnt){
						if(pageCnt > 1){
							objImgKvVisualBtn[0].style.display = "";
							objImgKvVisualBtn[1].style.display = "";
						}else{
							objImgKvVisualBtn[0].style.display = "none";
							objImgKvVisualBtn[1].style.display = "none";
						}
					}
					
					function viewKvImages() {
						
						stageImageCount = kvImageCount;
						stageImageList = arrayClone(kvImageList);
						galleryEndPage = Math.ceil(stageImageCount / galleryCountPerPage);
						displayKvBtn(galleryEndPage);
						if (stageImageCount > 0) {
							viewGalleryPage(1);
						}
					}
					
					function viewColorImages(colorIndex) {
						stageImageCount = colorImageCount[colorIndex];
						stageImageList = arrayClone(colorImageTagList[colorIndex]);
						galleryEndPage = Math.ceil(stageImageCount / galleryCountPerPage);
						displayKvBtn(galleryEndPage);
						if (stageImageCount > 0) {
							viewGalleryPage(1);
						}
					}
					
					function arrayClone(arr) {
						var arrTemp = null;
						arrTemp = arr.slice(0, arr.length);
						return arrTemp; 
					}
		
					function gallery_view3(imgHref) {
						
						if (document.getElementById("layer_largerview")) {
							var pop_layer = document.getElementById("product_visual");
							var layer_largerview = document.getElementById("layer_largerview");
							pop_layer.removeChild(layer_largerview);
						}
						var imgLayer = document.getElementById("visual_image");
						var visual_vr = document.getElementById("visual_vr");
						var imgs = imgHref.href;
						var chageImg = imgLayer.firstChild;
						var img_type = imgs.substring(imgs.lastIndexOf(".")+1,imgs.lastIndexOf(".")+4);
						if (img_type=="jpg" || img_type=="JPG" || img_type=="gif" || img_type=="GIF") {
							visual_vr.style.display = "none";
							imgLayer.style.display = "block";
							if(chageImg.nodeType!=1) {
								chageImg = chageImg.nextSibling;
							}
							chageImg.setAttribute("src",imgs);
						} else {
							
							visual_vr.style.display = "block";
							imgLayer.style.display = "none";

							var obj = document.getElementById("visual_vr");
							
							var txt_tmp = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100%" height="100%">';
								txt_tmp = txt_tmp + '<param name="movie" value="'+imgs+'" />';
								txt_tmp = txt_tmp + '<param name="wmode" value="transparent" />';
								txt_tmp = txt_tmp + '<param name="allowScriptAccess" value="always" />';
								txt_tmp = txt_tmp + '<!--[if !IE]> <-->';
								txt_tmp = txt_tmp + '<object type="application/x-shockwave-flash" data="'+imgs+'" width="100%" height="100%">';
								txt_tmp = txt_tmp + '<param name="wmode" value="transparent" />';
								txt_tmp = txt_tmp + '<param name="allowScriptAccess" value="always" />';
								txt_tmp = txt_tmp + '</object>';
								txt_tmp = txt_tmp + '<!--> <![endif]-->';
								txt_tmp = txt_tmp + '</object>';
								
							obj.innerHTML=txt_tmp;
							//featureGalleryView3FlashLoad("visual_vr","nl",imgs);
						}
					}		
									
					// Init.
					viewKvImages();
				//]]>
				</script>
 
Last edited:

Skyrider

Skyrider
Base belongs to me.
👑 Administrator
🌠 Staff
✔️ HL Verified
🚂 Steam Linked
💎Légéñdārý
Joined
Nov 30, 2002
Messages
10,867
Best answers
0
Location
Netherlands
I actually tried that, but failed. Could also be as I had quite limited access on my internship's website. Guess I'll give it a go on local, thanks :p. Though I am still looking for scripts quite similar like that one. It does needs to fit the site after all :).
 

Sicron

Sicron
New Member
✔️ HL Verified
💻 Oldtimer
Joined
Mar 29, 2003
Messages
4,765
Best answers
0
Location
The Netherlands
Well, if you use Firefox, you can install a web developer plugin that greatly helps you with this kind of stuff (and a lot of other things handy for webdesigners), so you might need it to be able to take a better look at the source.
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 1 (members: 0, guests: 1)
Top Bottom