JavaScript - Adding Next & Previous Buttons To This Jquery Slideshow

I have a slideshow that allows the user to see the previous slide title and the next slide title along with the current slide and its content. I tested locally not in WP and the code worked fine. Once I placed my source within WP everything went south. I inspector the first line in the script seems to be what is having the issues - $(window).load(function(){ and I am unsure what to do next.

The source was used from Edit fiddle - JSFiddle

the page I am trying to get to work is located here - Sevices | Q&D CONSTRUCTION, INC.Q&D CONSTRUCTION, INC.

I am open to any suggestions.

Code:

 <script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
    
  
  <style type='text/css'>
    .cycle-slide {
    width: 100%;
    text-align: center;
}
img {
    max-width: 300px;
}

#next {
    float: right;
}
#prev {
    float: left;
}
.center {
    text-align: center;
}
  </style>
  


<script type="text/javascript">//<![CDATA[ 
 $(window).load(function(){ 
var slideshow = $('.cycle-slideshow');
    maxSlides = slideshow.data('cycle.opts').slideCount;

slideshow.on({
    'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
        UpdateTitles();
    }
});

function UpdateTitles(){
    var currentSlide = slideshow.data('cycle.opts').currSlide;
    activeSlide = $(".cycle-slide-active");
    activeTitle = activeSlide.data('title');
    
    if(currentSlide == 0){
        nextTitle = activeSlide.next().data('title');
        prevTitle = $(".cycle-slide").eq(maxSlides).data('title');
    }
    else if(currentSlide == maxSlides-1){
        prevTitle = activeSlide.prev().data('title');
        nextTitle = $(".cycle-slide").eq(0).data('title');
    }
    else {
        nextTitle = activeSlide.next().data('title');
        prevTitle = activeSlide.prev().data('title');
    }
    
    $('h1').html(activeTitle);
    $('#prev').html("Previous: "+prevTitle);
    $('#next').html("Next: "+nextTitle);
}

UpdateTitles();
});//]]>  

</script>

I have been trying to develop a script that creates a slideshow that adds hyperlinks to the images.

I'm a beginner at Javascript, so I've made a bastardisation of 3 different scripts I've found that, by my reckoning, should work.

This is the slideshow code:
Code:

window.onload = initAll;

var gallery_url = new Array('<a href="http://www.optionstradingaustralia.com.au" target=_blank>', '<a href="http://home.iprimus.com.au/thebyrnes5/splats/index.html">')
var thisUrl = 0;

var gallery = new Array("portfolio_ota.jpg", "portfolio_bashbrothers.jpg");
var thisImage = 0;

var gallery_title = new Array("Options Trading Australia Website", "The Bash Brothers Website");
var thisTitle = 0;

var gallery_number = new Array("1", "2");
var thisNumber = 0;

function initAll() {
document.getElementById("previous").onclick = processPrevious;
document.getElementById("next").onclick = processNext;
}
	
function processPrevious () {
if (thisUrl == 0) {
thisUrl = gallery_url.length;
}
thisImage--;
document.getElementById("view_portfolio").src = gallery_url[thisUrl]+'<img src="'+thisImage+'"></a>';
document.getElementById("portfolio_title").innerHTML = gallery_title[thisUrl];
document.getElementById("portfolio_number").innerHTML = gallery_number[thisUrl];
return false;
}
	
function processNext () {
thisImage++;
if (thisUrl == gallery_url.length) {
thisUrl = 0;
}
document.getElementById("view_portfolio").src = gallery_url[thisUrl]+'<img src="'+thisImage+'"></a>';
document.getElementById("portfolio_title").innerHTML = gallery_title[thisUrl];
document.getElementById("portfolio_number").innerHTML = gallery_number[thisUrl];
return false;
}

I know that for the most part, this script works. It was only when I tried to add the component that involved adding a hyperlink that it broke. The bit of code in the HTML that it directly affects is <div id="view_portfolio"> &nbsp; </div>

Does anyone know why the javascript doesn't work? I have a feeling it's because I haven't applied the id tag in the HTML properly, but I don't know what exactly is wrong about it. I am hoping someone here can shed some light on the situation!

The gallery I have made so far is at http://www.clarebyrnedesign.com.au/portfolio.html, except that at the moment, the images don't show. I've attached the javascript & html code.

Thanks!

I am looking for tutorials on creating a slideshow with thumbnails, but i need one where i can put the mouse over the thumbnail depending on the direction i am the mouse the thumbnail will move left or right

thanks

Hi,

Following this jQuery slideshow tutorial (Usecase 3 sample, about 2/3 down the page, this is the one without thumbnails):

http://www.gcmingati.net/wordpress/w...vwt/index.html

I constructed the slideshow:

http://backstageweb.net/Salon/slideshowcode.htm

...which works perfectly in browser view locally (FF and IE). When uploaded to the server, however, I've got a static list of photos as you can see. Can someone shed some light on what the problem is? All relevant files are attached (I changed the images to simple colors to get the file size within the attachment limit).

Thanks.

John

Hey guys. I am using a javascript slideshow called fadeshow. (Main code below).

I am wondering if there is a way to have thumbnail support, so I could allow the users to click on a thumbnail and have fadeshow go to that photo in the array. I have gotten a next / previous button working but also would like to add thumbnails.

How would I write an a href link to specify an image in the array? Can this be done?

Code:

<script type="text/javascript">
var mygallery2=new fadeSlideShow({
  wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
  dimensions: [1000, 665], //width/height of gallery in pixels. Should reflect dimensions of largest image
  imagearray: [
  ["images/1m.jpg"],
  ["images/2m.jpg"],
  ["images/3m.jpg"]
  ],
  displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
  persist: false, //remember last viewed slide and recall within same session?
  fadeduration: 500, //transition duration (milliseconds)
  descreveal: "always",
  togglerid: "fadeshow2toggler"
})
</script>

<div id="fadeshow2toggler">

<a href="#" class="next"><div id="fadeshow2"></div></a><!--allows clicking the photo for next-->

<a href="#" class="prev">Previous</a>  <a href="#" class="next">Next Image</a> (&nbsp;<span class="status"></span>&nbsp;)</span>

</div><!--end fadeshow2toggler-->

<!--thumbnails i would like to work-->
<a href= # ><img src="images/thumbnail1.jpg"></a>
<a href= # ><img src="images/thumbnail2.jpg"></a>
<a href= # ><img src="images/thumbnail3.jpg"></a>

Any advice appreciated!

Hello all! This is my first time in the forum and I have been reading for a while. The information in here appears to be very accurate and useful. I am new to JavaScript. I have been programming sites for a while but have been using Flash for most of my animation and never really got into the ActionScript. Thanks to Apple... I can no longer use that crutch. So as I post in this forum please understand 2 things: 1 I am a beginner in JavaScript and 2. I want to learn not just copy, paste and move on!

Here is my issue: I have made a VERY SIMPLE slide show and it works perfectly. However, Now I want to add a fade in and out effect to the code. I have seen this done with the CSS opacity(alpha) and that seems to be the simplist way. However, I am having trouble fitting this into my code. Any direction in this matter would be great! Thanks so much!

Code:

	
var step=1
function switchImg()
{
if (!document.images)
return						
document.images.slide.src=eval("image"+step+".src")
if (step<9)
step++
else
step=1
setTimeout("switchImg()",3500)
}
switchImg()

So i purchased a template from template monster for wordpress.

http://www.templatemonster.com/demo/28861.html

On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link.

My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain.
---------------------------------------------------------------------
<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>


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

Full code below


<div id="thumbs" class="navigation">

<ul class="thumbs noscript">

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" />

</a>

<div class="caption">

<div class="indent1">in grey</div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" />

</a>

<div class="caption">

<div class="indent1">in grey </div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li class="last">

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

</ul>

</div>



</div>

</div>

Hi again

For instance I want to display some announcements from an external text file on a predefined box, like lets say 140 wide and height scalable according to text. The texts would be some announcements from me, a few words. I want the text justified and with previous / next link, if possible. And when they navigate to another page, they will get a random message in that box.

There are news tickers on the net, but I just want something simple like this, no scrolling, fading, etc..

Has anyone a clue how I can accomplish that? Thanks.

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/slideshow/image001.jpg"
var image2=new Image()
image2.src="images/slideshow/image002.jpg"
var image3=new Image()
image3.src="images/slideshow/image003.jpg"
var image4=new Image()
image4.src="images/slideshow/image004.jpg"
var image5=new Image()
image5.src="images/slideshow/image005.jpg"
var image6=new Image()
image6.src="images/slideshow/image006.jpg"
var image7=new Image()
image7.src="images/slideshow/image007.jpg"
var image8=new Image()
image8.src="images/slideshow/image008.jpg"
var image9=new Image()
image9.src="images/slideshow/image009.jpg"
var image10=new Image()
image10.src="images/slideshow/image010.jpg"
var image11=new Image()
image11.src="images/slideshow/image011.jpg"
var image12=new Image()
image12.src="images/slideshow/image012.jpg"
var image13=new Image()
image13.src="images/slideshow/image013.jpg"
var image14=new Image()
image14.src="images/slideshow/image014.jpg"
var image15=new Image()
image15.src="images/slideshow/image015.jpg"
var image16=new Image()
image16.src="images/slideshow/image016.jpg"
var image17=new Image()
image17.src="images/slideshow/image017.jpg"
var image18=new Image()
image18.src="images/slideshow/image018.jpg"
var image19=new Image()
image19.src="images/slideshow/image019.jpg"
var image20=new Image()
image20.src="images/slideshow/image020.jpg"
//-->
</script>
</head>

<body>
<img src="images/slideshow/image001.jpg" name="slide">

<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src" )
if (step<20)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html> 

Hello - I'm trying to add a fade effect between slideshow transitions. The script I'm building from is the Rich HTML Slideshow script which appears below.

The slides that rotate are wrapped in <div> tags with a class of "dyncontent" and I've managed to make the slideshow transition just fine, but not with any kind of fade effect. It just "snaps" from one slide to the next. Is this a fairly simple addition? Thanks!
<script type="text/javascript">

if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{display: none; width: 250px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i]
}
}

function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" //hide previous message
messages[curcontentindex].style.display="block" //show current message
}


window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 2000)
}
}

</script>

Hello coding world,

After hours of searching the net I found this awesome slideshow. Check it out:

http://tympanus.net/codrops/2011/01/...comment-409563

I really do like this slideshow but I am having problems adding a caption to each image. I am hoping to have the caption located under the image and slide in with each image.

Can anyone help me out? Please.

Thanks in advance.
Best regards,
Alan

Good day all,

I was hoping someone could help me out with the following. I currently have a slideshow that as thumbnails under a main image. The thumbnails slide left and right with hover on a button and with a click changes main image without any problems.

Few things I am looking to change/add:

1. The ability to mouse over the main image and have the caption appear than disappear when the mouse is moved off. Currently I have the caption as a static text under the main image.

2. Start the thumbnail position in the middle instead of the left

3. Add mouseover buttons to the main image to give the ability to cycle through the images instead of having to always use the thumbnails.

Below I've include the Javascript code: Is this the best way or is there a better way?

Example of slideshow: http://neileverosborne.com/portfolios/manatees.html

JAVASCRIPT:
Code:

	var displayWaitMessage=true;	// Display a please wait message while images are loading?


	var activeImage = false;
	var imageGalleryLeftPos = false;
	var imageGalleryWidth = false;
	var imageGalleryObj = false;
	var maxGalleryXPos = false;
	var slideSpeed = 0;
	var imageGalleryCaptions = new Array();
	function startSlide(e)
	{
		if(document.all)e = event;
		var id = this.id;
		if(this.id=='arrow_right'){
			slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = -1*slideSpeedMultiply;
			slideSpeed = Math.max(-10,slideSpeed);
		}else{
			slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = 1*slideSpeedMultiply;
			slideSpeed = Math.min(10,slideSpeed);
			if(slideSpeed<0)slideSpeed=10;
		}
	}

	function releaseSlide()
	{
		var id = this.id;
		slideSpeed=0;
	}

	function gallerySlide()
	{
		if(slideSpeed!=0){
			var leftPos = imageGalleryObj.offsetLeft;
			leftPos = leftPos/1 + slideSpeed;
			if(leftPos>maxGalleryXPos){
				leftPos = maxGalleryXPos;
				slideSpeed = 0;

			}
			if(leftPos<minGalleryXPos){
				leftPos = minGalleryXPos;
				slideSpeed=0;
			}

			imageGalleryObj.style.left = leftPos + 'px';
		}
		setTimeout('gallerySlide()',20);

	}

	function showImage()
	{
		if(activeImage){
			activeImage.style.filter = 'alpha(opacity=50)';
			activeImage.style.opacity = 0.5;
		}
		this.style.filter = 'alpha(opacity=100)';
		this.style.opacity = 1;
		activeImage = this;
	}

	function initSlideShow()
	{
		document.getElementById('arrow_left').onmousemove = startSlide;
		document.getElementById('arrow_left').onmouseout = releaseSlide;
		document.getElementById('arrow_right').onmousemove = startSlide;
		document.getElementById('arrow_right').onmouseout = releaseSlide;




		imageGalleryObj = document.getElementById('theImages');
		imageGalleryLeftPos = imageGalleryObj.offsetLeft;
		var galleryContainer = document.getElementById('galleryContainer');
		imageGalleryWidth = galleryContainer.offsetWidth - 20;
		maxGalleryXPos = imageGalleryObj.offsetLeft;
		minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;

		if (navigator.userAgent.indexOf('MSIE') >= 0) {
			var arrowWidth = document.getElementById('arrow_left').offsetWidth;
			var el = document.createElement('div');
			el.style.position = 'absolute';
			el.style.left = arrowWidth + 'px';
			el.style.width = (galleryContainer.offsetWidth - arrowWidth * 2) + 'px';
			el.style.overflow = 'hidden';
			el.style.height = '100%';

			document.getElementById('galleryContainer').appendChild(el);
			el.appendChild(document.getElementById('theImages'));
		}
		var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
		for(var no=0;no<slideshowImages.length;no++){
			slideshowImages[no].onmouseover = showImage;
		}

		var divs = imageGalleryObj.getElementsByTagName('DIV');
		for(var no=0;no<divs.length;no++){
			if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
		}
		gallerySlide();
	}

	function showPreview(imagePath,imageIndex){
		var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
		if(subImages.length==0){
			var img = document.createElement('IMG');
			document.getElementById('previewPane').appendChild(img);
		}else img = subImages[0];

		if(displayWaitMessage){
			document.getElementById('waitMessage').style.display='inline';
		}
		document.getElementById('largeImageCaption').style.display='none';
		img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
		img.src = imagePath;

	}
	function hideWaitMessageAndShowCaption(imageIndex)
	{
		document.getElementById('waitMessage').style.display='none';
		document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
		document.getElementById('largeImageCaption').style.display='block';

	}
	window.onload = initSlideShow;

Hello everyone,

I am totally new to javascript, I have a web form I designed using coffeecup, the form is very long about 4 pages long and it is all in one long scroll down the page, I was wondering if I can add page breaks and at the bottom of each categoty inserting a button for next and back whilst hiding the rest of the categories until next is clicked etc. until you reach submit.

Please help in anyway you can?\

Yhanks
K

Code:

<script type="text/javascript" language="javascript">
function toggle()
{
var ele = document.getElementById("toggle");
var text = document.getElementById("display");
if(ele.style.display == "block")
{
ele.style.display = "none";
text.innerHTML = "Show";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script>

Code:

<a href="javascript:toggle();" id="display" style="color:#000000">Show</a>
<div id="toggle" style="display:none">CONTENT</div>

The above toggle code works perfectly.

How can I edit the code to use buttons instead of text? In other words: How can I replace two different texts that say "Show" and "Hide" with two different buttons that say "Show" and "Hide"?

Thanks.

I am trying to add tabindex values to buttons built in JavaScript as I did with accesskeys but having no luck--it disrupts my page layout. Anyone have suggestions? Here is the code I am working with:
Code:

function ObjButtonBuild() {
  this.css = buildCSS(this.name,this.x,this.y,this.w,this.h,this.v,this.z)
  this.div = '<' + this.divTag + ' id="'+this.name+'" style="text-indent:0;"></' + this.divTag + '>\n'
  this.divInt = '<a name="'+this.name+'anc" href="javascript:void(null)"'
  if(this.accessKeyValue && this.accessKeyValue!=null){
  
  	this.divInt+=' accessKey='+this.accessKeyValue+' ';
  }
  
  if( this.altName ) this.divInt += ' title="'+this.altName+'"'
  else if( this.altName != null ) this.divInt += ' title=""'
  this.divInt += '><img name="'+this.name+'Img" src="'+this.imgOffSrc
  if( this.altName ) this.divInt += '" alt="'+this.altName
  else if( this.altName != null ) this.divInt += '" alt="'
  this.divInt += '" width='+this.w+' height='+this.h+' border=0'
  if( !is.ns4 )  this.divInt += ' style="cursor:pointer"'
  this.divInt += '></a>'
}

Code:

button41 = new ObjButton('button41',null,679,0,53,32,1,54,'div')
button41.setImages('images/0807_help.jpg','images/0807_help_over.jpg','images/0807_help_over.jpg')
button41.onUp = button41onUp
button41.hasOnUp = true
button41.capture=4
button41.setAccessKey(2)
button41.setTabIndex(2)
button41.build()