[OPGELOST] Hover Image Tekst

[Evert B.]

Beste mensen,

Ik probeer dezeplugin werkend te krijgen.
Dit lukt prima in een standaard CMSMS template, maar niet in een template uit de forge. Ik heb van het template uit de forge (Typofolio) de verwijzingen naar het javascript al weggehaald, want de nieuws-slider bracht me niet wat ik hebben wilde. Ik wil namelijk wel het effect van een afbeelding waar er bij hover tekst overheen gaat, maar die afbeelding moet niet naar de nieuwsmodule linken, maar naar een bestaande pagina. Dus zocht ik mijn heil in de plugin van jQuery.

Hierwerkt het dus niet.
Hierwerkt het dus wel.

In de CSS kom ik niets tegen wat zich met de afbeeldingen bemoeit.
Wie weet waar ik het zoeken moet...

[Jos]

In de "hier werkt het wel" pagina staat bovenin de html bron:

Code: Select all

<__script__ type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></__script>
<__script__ type="text/javascript" src="jquery.hoverimagetext.compressed.js"></__script>
		<__script__ type="text/javascript">
			/* jQuery hoverImageText plugin usage */
			$(document).ready(function() {
				/* options can be found within the plugin js */
				$.fn.HoverImageText.defaults.AnimShow = {height: "show"};
				$('.imageLibrary a').HoverImageText();
			});
		</__script>

(weliswaar op de verkeerde plek, het hoort ergens na de Doctype, maargoed)

Deze javascript ontbreekt in zijn geheel in de "hier werkt het niet" pagina.

[Evert B.]

Thanks Jos,

ALs ik het in de zet krijg ik onderstaande foutmelding:

Code: Select all

string(215) "Smarty error: [in tpl_top:24 line 7]: syntax error: unrecognized tag: /* options can be found within the plugin js */ $.fn.HoverImageText.defaults.AnimShow = {height: "show" (Smarty_Compiler.class.php, line 446)" string(109) "Smarty error: [in tpl_top:24 line 7]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)" 

Ik heb het dus in het gedeelte 'Smarty data of logica, specifiek voor deze pagina:' gezet.
En tussen de {literal} en {/literal} tags natuurlijk.

Groeten Evert

[deactivated010521]

----------

[Evert B.]

Arnoud die fout zie ik nergens terug hoor, overal staat netjes een ' { '.

Anders zit er niets anders op dan zelf een template te maken zeker?

Groeten Evert

[Jos]

niet zo snel opgeven!

zet de javascript aanroepen eens tussen de tags

en er zit toch echt wel verschil tussen de javascript codes in de wel werkende pagina en de niet werkende pagina.

wel werkend:

Code: Select all

			$(document).ready(function() {
				$.fn.HoverImageText.defaults.AnimShow = {height: "show"};
				$('.imageLibrary a').HoverImageText();
			});

niet werkend:

Code: Select all

			$(document).ready(function() ;
				$('.imageLibrary a').HoverImageText();
			});

Let vooral op de puntkomma in de eerste regel

[Evert B.]

Ok.

Waar het wel werkt staat de code enkel in de 'Smarty data of logica, specifiek voor deze pagina:' tussen {literal} en {/literal}.

Als ik dezelfde code 100% kopieer in het zelfde tekstvlak van een pagina met het andere template werkt het dus niet.

Dat ruikt naar iets vreemds...

@Jos, ik stoei er al de hele dag mee vandaar dat ik de handdoek klaar heb (om in de ring te gooien)...

[Jos]

Ik neem aan dat je de {literal} tags meegekopieerd hebt... dat zou namelijk wel goed moeten gaan... Ik vermoed toch dat we het in die hoek moeten zoeken. Misschien dat in de template ook al {literal} tags staan...

Ik wil best even voor je kijken als je even een tijdelijk adminaccount naar me PM-t

[Evert B.]

Jos had gelijk.
Ik dacht dat wanneer je in de zette, je dan geen {literal} hoefde te gebruiken. Dus ik dacht dat {literal} enkel voor bij de paginaspecifieke metadata nodig was. Tjeonge wat is alles simpel als je het weet.

Je begrijpt hoe blij ik was toen het werkte... 

In mijn enthousasme ging ik meteen verder met mijn nieuwe 'project', namelijk het implemanteren van dezejQuiry Slideshow. Tot mijn grote verbazingblijdschap kreeg ik dit ook werkend.
Echter... jullie weten het al voor ik het opschrijf: nu werkt het eerder gebruikte jQuiry niet meer van de eerste twee images.

Zie hier hoe het er nu uit ziet. De eerste twee images behoren bij mouse over tekst te vertonen en een opacity-achtergrond die er van boven naar beneden overheen schuift.

Wie snapt wat er nu fout gaat?

Ter info hieronder alles wat er nu in de van mijn sjabloon staat:

Code: Select all

  <head>
    <title>{$pagetitle} - {sitename}
    </title>
    {metadata}
    {stylesheet}
    {cms_selflink dir='start' rellink=1}
    {cms_selflink dir='prev' rellink=1}
    {cms_selflink dir='next' rellink=1}    

{literal}
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></__script>
<__script__ type="text/javascript" src="cycle.js"></__script>
<__script__ type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></__script>
<__script__ type="text/javascript" src="jquery.hoverimagetext.compressed.js"></__script>
		<__script__ type="text/javascript">
			/* jQuery hoverImageText plugin usage */
			$(document).ready(function() {
				/* options can be found within the plugin js */
				$.fn.HoverImageText.defaults.AnimShow = {height: "show"};
				$('.imageLibrary a').HoverImageText();
			});
		</__script>
{/literal}
{literal}
<__script__ type="text/javascript" src="js/jquery-1.3.1.min.js"></__script>
<__script__ type="text/javascript">

$(document).ready(function() {		
	
	//Execute the slideShow, set 4 seconds for each images
	slideShow(4000);

});

function slideShow(speed) {


	//append a LI item to the UL list for displaying caption
	$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

	//Set the opacity of all images to 0
	$('ul.slideshow li').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('ul.slideshow li:first').css({opacity: 1.0});
	
	//Get the caption of the first image from REL attribute and display it
	$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
	$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
		
	//Display the caption
	$('#slideshow-caption').css({opacity: 0.7, bottom:0});
	
	//Call the gallery function to run the slideshow	
	var timer = setInterval('gallery()',speed);
	
	//pause the slideshow on mouse over
	$('ul.slideshow').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery()',speed);			
		}
	);
	
}

function gallery() {


	//if no IMGs have the show class, grab the first image
	var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
		
	//Get next image caption
	var title = next.find('img').attr('title');	
	var desc = next.find('img').attr('alt');	

	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
	
	//Hide the caption first, and then set and display the caption
	$('#slideshow-caption').animate({bottom:-70}, 300, function () {
			//Display the content
			$('#slideshow-caption h3').html(title);
			$('#slideshow-caption p').html(desc);				
			$('#slideshow-caption').animate({bottom:0}, 500);	
	});		

	//Hide the current image
	current.animate({opacity: 0.0}, 1000).removeClass('show');

}
</__script>
{/literal}


  </head>  

[deactivated010521]

----------

[Evert B.]

Bedankt Arnoud,

Je hebt gelijk dat ik jquiry twee keer aanroep.
Ik begrijp niet waarom maar nu krijg ik boven aan de site een deel van het java te zien, terwijl er wel {literal} tags staan? Dan zou dat toch juist niet in de front-end zichtbaar moeten zijn?

En nu werkt de image-slidehow weer niet. De twee images met hover-text werken nu wel

Mijn nieuwe ziet er als volgt uit.

Code: Select all

<head>
    <title>{$pagetitle} - {sitename}
    </title>
    {metadata}
    {stylesheet}
    {cms_selflink dir='start' rellink=1}
    {cms_selflink dir='prev' rellink=1}
    {cms_selflink dir='next' rellink=1}    

{literal}
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></__script>
<__script__ type="text/javascript" src="cycle.js"></__script>
<__script__ type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></__script>
<__script__ type="text/javascript" src="jquery.hoverimagetext.compressed.js"></__script>
		<__script__ type="text/javascript">
			/* jQuery hoverImageText plugin usage */
			$(document).ready(function() {
				/* options can be found within the plugin js */
				$.fn.HoverImageText.defaults.AnimShow = {height: "show"};
				$('.imageLibrary a').HoverImageText();

	//Execute the slideShow, set 4 seconds for each images
	slideShow(4000);

			});
		</__script>
{/literal}

{literal}
function slideShow(speed) {


	//append a LI item to the UL list for displaying caption
	$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

	//Set the opacity of all images to 0
	$('ul.slideshow li').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('ul.slideshow li:first').css({opacity: 1.0});
	
	//Get the caption of the first image from REL attribute and display it
	$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
	$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
		
	//Display the caption
	$('#slideshow-caption').css({opacity: 0.7, bottom:0});
	
	//Call the gallery function to run the slideshow	
	var timer = setInterval('gallery()',speed);
	
	//pause the slideshow on mouse over
	$('ul.slideshow').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery()',speed);			
		}
	);
	
}

function gallery() {


	//if no IMGs have the show class, grab the first image
	var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
		
	//Get next image caption
	var title = next.find('img').attr('title');	
	var desc = next.find('img').attr('alt');	

	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
	
	//Hide the caption first, and then set and display the caption
	$('#slideshow-caption').animate({bottom:-70}, 300, function () {
			//Display the content
			$('#slideshow-caption h3').html(title);
			$('#slideshow-caption p').html(desc);				
			$('#slideshow-caption').animate({bottom:0}, 500);	
	});		

	//Hide the current image
	current.animate({opacity: 0.0}, 1000).removeClass('show');

}
</__script>
{/literal}


  </head> 

[deactivated010521]

----------

[Evert B.]

Arnoud helemaal SUPER het werkt prima nu!!!!
Het is hierte zien.

Thanks!!!

Ga ik nu verder met de rest van de site, ik post het later in de showroom.

Groeten Evert